Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.js"></script>
<title>Test select</title>
</head>
<body>
<div id="prio_select_id" style="width:100%;border:1px solid red;"></div>
<script>
"use strict";
function prio_select()
{
var data = {
div: 'prio_select_id',
prio: [
{
val: 1,
kurz: 'Test 1',
lang: 'Test 1 laaaaaaaaaaaaaaaaaaang geschrieben'
},
{
val: 2,
kurz: 'Test 2',
lang: 'Test 2 laaaaaaaaaaaaaaaaaaang geschrieben'
},
{
val: 3,
kurz: 'Test 3',
lang: 'Test 3 laaaaaaaaaaaaaaaaaaang geschrieben'
},
{
val: 4,
kurz: 'Test 4',
lang: 'Test 4 laaaaaaaaaaaaaaaaaaang geschrieben'
},
{
val: 5,
kurz: 'Test 5',
lang: 'Test 5 laaaaaaaaaaaaaaaaaaang geschrieben'
},
{
val: 6,
kurz: 'Test 6',
lang: 'Test 6 laaaaaaaaaaaaaaaaaaang geschrieben'
}
]
};
var toggle = function(data, kurz_lang, e)
{
$(this).off("mouseleave click");
if (e.relatedTarget || e.type == "click")
{
this.hide(70, function()
{
data.prio.forEach(function(ref)
{
ref.opt.innerHTML = ref[kurz_lang];
});
}).show(70, function()
{
data.stand = kurz_lang;
switch (kurz_lang)
{
case "kurz":
$(this).one("mouseenter", $.proxy(toggle, $(this), data, 'lang'));
break;
case "lang":
$(this).on("mouseleave", $.proxy(toggle, $(this), data, 'kurz'));
break;
}
});
}
else
{
$(this).on("mouseleave", $.proxy(toggle, $(this), data, 'kurz')).on("click", $.proxy(toggle, $(this), data, 'kurz'));
}
};
var zielobj = document.getElementById(data['div']);
var sel = document.createElement('select');
data['prio'].forEach(function(ref) {
ref['opt'] = new Option(ref['kurz'],ref['val']);
ref['opt'].innerHTML = ref['kurz'];
sel.appendChild(ref['opt']);
});
zielobj.appendChild(sel);
data['stand'] = 'kurz';
$(sel).one("mouseenter", $.proxy(toggle, $(sel), data, 'lang'));
}
prio_select();
</script>
</body>
</html>
