<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div style="border:1px solid blue">
<form method="post" action="">
<select name="" id="a1">
<option value="" selected>aaa</option>
<option value="">bbb</option>
</select>
<select name="" id="a2">
<option value="" selected>ccc</option>
<option value="">dd</option>
</select>
<select name="" id="a3">
<option value="" selected>ccc</option>
<option value="">dd</option>
</select>
</form>
</div>
aaa
</body>
</html>
<script>
function initSelectCombo(selectIds) {
alert(selectIds);
if (selectIds == null || selectIds == undefined) {
return;
}
var ids = selectIds.split(',');
for (i = 0; i < ids.length; i++) {
if (ids[i] == '') {
continue;
}
var curSel = document.getElementById(ids[i]);
var pnode = curSel.parentNode;
// 创建元素
var sdiv = document.createElement('div');
sdiv.style.display = 'inline';
sdiv.style.border = '0px';
sdiv.style.position = 'relative';
pnode.insertBefore(sdiv, curSel);
sdiv.appendChild(curSel);
var sinput = document.createElement('input');
sinput.style.display = 'none';
sinput.placeholder = '查询';
var idd = ids[i];
sinput.onkeyup = function () {
querySelect(this.previousSibling);
};
var sselect = document.createElement('select');
sselect.style.display = 'none';
sselect.style.position = 'absolute';
sselect.style.left = '0';
sdiv.appendChild(sinput);
sdiv.appendChild(sselect);
curSel.onclick = function () {
querySelect(this);
}
}
var querySelect = function (s) {
//alert(sid);
//var s = document.getElementById(sid);
var s1 = s.nextSibling;
var s2 = s1.nextSibling;
var vs = s1.value.toLowerCase();
if (!s.disabled) {
s1.style.width = s2.style.width = '120px';
s.style.display = 'none';
s1.style.display = 'inline';
s2.style.display = 'block';
var op = s.options;
s2.options.length = 0;
for (i = 0; i < op.length; i++) {
if (op[i].innerText.toLowerCase().indexOf(vs) > - 1) {
var e = document.createElement('option');
e.value = op[i].value;
e.innerText = op[i].innerText;
s2.appendChild(e);
}
}
s2.onchange = function () {
//alert("s1 change");
s1.style.display = 'none';
s2.style.display = 'none';
s.style.display = 'inline';
s.value = s2.value;
if (s.onchange != null && s.onchange != undefined) {
s.onchange();
}
}
s2.size = 10;
}
}
}
initSelectCombo('a1,a2,a3');
</script>
1033
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
