原生js 下拉多选

锅里游的鱼吖

已于 2022-11-29 10:24:54 修改

阅读量1.6k

点赞数 2

分类专栏： JavaScript 文章标签： css html javascript

于 2022-11-29 10:24:10 首次发布

本文链接：https://blog.csdn.net/qq_36702286/article/details/128092970

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的前端选框组件，支持文本输入模糊搜索和多选功能。通过动态创建checkbox和监听事件，用户可以快速查找并选择组织。选中的组织代码和名称会同步更新，并在提交时显示给业务员。

摘要由CSDN通过智能技术生成

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;">
    <title>select</title>
</head>
<body>
<div style="width:200px;height:20px;overflow:hidden;">
    <input type="text" id="selectButton" onclick="myclick();" readonly="true" style="width:200px;height:20px;">
</div>
<div id="fuzzysearchdiv" style="display:none;width:200px;z-index:3;position:absolute;height:20px;"
     onMouseOver="mousein()" onMouseOut="mouseout()">
    <input type="text" id="fuzzysearch" onkeyup="myfuzzysearch()" style="width:185px;"/>
</div>
<div id="selectdiv" style="display:none;border:1px solid #A9A9A9;width:200px;z-index:2;position:absolute;overflow-y :scroll;height:100px;background-color:white;"
     onMouseOver="mousein()" onMouseOut="mouseout()">
    <br>

</div>
<br>
<input type="button" value="提交" onclick="mysubmit();"/>
</body>
<script type="text/javascript">

  //下拉框的数据
  let initlist = ['3001/组织1','3002/组织2','3003/组织3','3004/组织4','3005/组织5','3006/组织6','3007/组织7','3008/最后一个组织'];//

  //多选下拉框所在的div
  let selecteddiv = document.getElementById("selectdiv");

  //鼠标是否在【多选下拉框div】上面（如果在div上面，需要控制鼠标的点击事件，不让div隐藏；否则要让该div隐藏）
  let indiv = false;

  //模糊查询input
  let fuzzysearchinput = document.getElementById("fuzzysearch");

  //选中的组织代码（需要传到后台的参数）
  let selectedlist = [];
  //选中的组织名称（展示在前台给业务员看的）
  let selectednamelist = [];

  window.onload = function(){

    //动态创建所有的checkbox元素
    for(let i = 0; i < initlist.length; i++){
      let tmpdiv = document.createElement("div");
      let tmpinput = document.createElement("input");
      tmpinput.setAttribute("name","mycheckbox");
      tmpinput.setAttribute("type","checkbox");
      tmpinput.setAttribute("onclick","mycheck(this)");
      tmpinput.setAttribute("value",initlist[i].substr(0,initlist[i].indexOf("/")));

      let tmptext = document.createTextNode(initlist[i].substr(initlist[i].indexOf("/")+1,initlist[i].length));
      tmpdiv.appendChild(tmpinput);
      tmpdiv.appendChild(tmptext);
      selecteddiv.appendChild(tmpdiv);
    }

    //鼠标点击事件，如果点击在 selectedbutton，或者是在多选框div中的点击事件，不作处理。其他情况的点击事件，将多选空div隐藏
    document.onclick=function(event){
      if(event.target.id=="selectButton" || indiv){
        return;
      }
      selecteddiv.style.display="none";
      document.getElementById("fuzzysearchdiv").style.display="none";
    };
  };

  //点击selectButton，展示多选框
  function myclick (){
    document.getElementById("fuzzysearchdiv").style.display="block";
    selecteddiv.style.display="block";
  }

  //鼠标进入多选框的div【selectdiv】
  function mousein(){
    indiv = true;
  }

  //鼠标离开多选框的div【selectdiv】
  function  mouseout(){
    indiv = false;
  }

  //checkbox的点击事件
  function mycheck(obj){
    if(obj.checked){
      selectedlist.push(obj.value);
      selectednamelist.push(obj.nextSibling.nodeValue);
    }else{
      for(let i = 0; i < selectedlist.length; i++){
        if(selectedlist[i] == obj.value){
          selectedlist.splice(i,1);
          selectednamelist.splice(i,1);
        }
      }
    }
    document.getElementById("selectButton").value=selectednamelist;
  }

  //模糊查询
  function myfuzzysearch(){
    let checkboxlist = document.getElementsByName("mycheckbox");
    for(let i = 0; i < checkboxlist.length; i++){
      if(checkboxlist[i].nextSibling.nodeValue.indexOf(fuzzysearchinput.value) == -1){
        checkboxlist[i].parentNode.style.display = "none";
      }else{
        checkboxlist[i].parentNode.style.display = "block";
      }
    }
  }

  function mysubmit(){
    alert(selectedlist);
  }
</script>

</html>

忘记在那个地方看到到的