自己写的select查询组合框

最新推荐文章于 2021-03-31 16:10:37 发布

lzjqq

最新推荐文章于 2021-03-31 16:10:37 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/lzjqq/article/details/84925599

版权

<!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>