组合框查询mysql_自己写的select查询组合框

Document

aaa

bbb

ccc

dd

ccc

dd

aaa

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');

分享到：

2018-09-05 11:48

浏览 494

评论