【项目实战】select+input实现下拉框左右选择+模糊查询功能

来源：互联网发布：干燥综合征知乎编辑：程序博客网时间：2024/04/28 19:40

前言：

在项目中用遇到下拉框左右选择的需求，而easyui没有找到合适的插件，就想着用listbox来实现，但后来针对这个项目中没有想到合适的办法（ps：大家有了可以推荐哟），从网上看了一些demo，就想着用select来实现下拉框左右选择的效果，再结合input实现select中option项的模糊查询。

主要代码：

页面：

 @*选择窗体*@    <div id="window" class="easyui-window" title="任务与指标信息" style="width:500px; height:395px" data-options="modal:true,collapsible:false,draggable:false,resizable:false,minimizable:false,maximizable:false,closable:false">       <div style="display:inline;">           <div style="display: inline;margin-left:33px">                <input id="searchIndicatorName" class="easyui-textbox"  style="margin-bottom:5px; height: 32px; width: 156px"/>           </div>           <div style="display: inline;position:relative;">               <a id="btnSearch" href="#" class="easyui-linkbutton" data-options="" style="margin-bottom:5px;margin-top:5px;margin-left:-5px">查询</a>               <a id="btnSearchAll" href="#" class="easyui-linkbutton" data-options="" style="margin-bottom:5px;margin-top:5px;margin-left:3px">所有</a>           </div>                   </div>     <div>           <div class="centent" style="display: inline;">         <div class="cententl" style="display: inline;margin-left:33px">                <select multiple="multiple" id="select1" class="" style="width: 156px; height: 250px;" data-option="valueField:'IndicatorID',textField:'IndicatorName'"></select>         </div>         <div class="btnAdd" style="display: inline;">             <input type="button" id="btnAdd" value=" 选择所选 > " style="width:100px;margin-bottom:6px;"/><br />             <input type="button" id="btnDel" value=" 删除所选 < " style="width:100px;margin-bottom:6px;"/><br />             <input type="button" id="btnAdds" value="选择全部 >>" style="width:100px;margin-bottom:6px;"/><br />             <input type="button" id="btnDels" value="删除全部 <<" style="width:100px;margin-bottom:6px;"/>         </div>         <div style="display: inline;">              <select multiple="multiple" id="select2" style="width: 156px; height: 250px;"></select>         </div>   </div>   </div>        <div id="buttons" style="margin-top: 10px; margin-left: 300px">            <a id="btnConfirm" href="#" class="easyui-linkbutton" data-options="">确定</a>            <a id="btnClose" href="#" class="easyui-linkbutton" data-options="">关闭</a>        </div>    </div>

js：

//关闭、右移、左移$(document).ready(function () {    $('#btnClose').click(function () {        $('#window').window('close');    });    //移到右边    $('#btnAdd').click(function () {        //获取选中的选项，删除自己并追加给对方        $('#select1 option:selected').appendTo('#select2');    });    //移到左边    $('#btnDel').click(function () {        //获取选中的选项，删除自己并追加给对方        $('#select2 option:selected').appendTo('#select1');    });    //全部移到右边    $('#btnAdds').click(function () {        //获取全部的选项,删除自己并追加给对方        $('#select1 option').appendTo('#select2');    });    //全部移到左边    $('#btnDels').click(function () {        //获取全部的选项,删除自己并追加给对方        $('#select2 option').appendTo('#select1');    });    //双击选项    $('#select1').dblclick(function () {        //获取双击的选项,删除自己并追加给对方        $("option:selected", this).appendTo('#select2');    });    //双击选项    $('#select2').dblclick(function () {        //获取双击的选项,删除自己并追加给对方        $("option:selected", this).appendTo('#select1');    });    //模糊查询    $('#btnSearch').click(function () {        var listarrID = [];//存储按关键字查询的（模糊查虚函数） 数组        var listarrName = [];        //获取输入的关键字        var text = $("#searchIndicatorName").val();        //提取含关键字的指标名，存储在数组里        for (var key in indicatorNameArray) {            if (indicatorNameArray[key].indexOf(text) > -1) {                listarrID.push(indicatorIDArray[key]);                listarrName.push(indicatorNameArray[key]);            }        }        //清空左边select1数据        document.getElementById("select1").options.length = 0;        //将含关键字的指标名显示在左边select1        for (var i = 0; i < listarrID.length; i++) {             var oOption = document.createElement("OPTION");            oOption.value = listarrID[i];            oOption.text = listarrName[i];            select1.options.add(oOption);        }        //去除左边select1中与右边select2（此任务已分配的指标）相同的数据        for (i = 0; i < document.getElementById("select2").options.length; i++) {//外层是右边select2的条数            for (var j = 0; j < document.getElementById("select1").options.length; j++) {                if (select1.options[j].value == select2.options[i].value) {                    document.getElementById("select1").options.remove(j);                    break;                }            }        }        listarrID = [];        listarrName = [];    });    //查询所有    $('#btnSearchAll').click(function () {        $("#searchIndicatorName").textbox("setValue", "");        document.getElementById("select1").options.length = 0;//动态删除所有options        for (var i = 0; i < indicatorNameArray.length; i++) {            var oOption = document.createElement("OPTION");            oOption.value = indicatorIDArray[i];            oOption.text = indicatorNameArray[i];            select1.options.add(oOption);        }        for (i = 0; i < document.getElementById("select2").options.length; i++) {//给select赋值              // 动态删除select中的某一项option：            for (var j = 0; j < document.getElementById("select1").options.length; j++) {                if (select1.options[j].value == select2.options[i].value) {                    document.getElementById("select1").options.remove(j);                    break;                }            }        }    });});

运行效果：

右侧select2是已分配的指标，左侧select1是排除已分配指标外，剩余的指标。

模糊查询效果：

总结：

这个过程中需要主要的，首先是对select中option的一些增加、删除、取值、获值等的操作；再着就是注意select中的去重，考虑到清空数组，防止第二次加载的时候回保留着上次的结果。同时也就是对indexOf的应用，将它写成indexof报错也调了一会儿呢，大家要细心哟。希望小编的总结能给大家带来帮助。

阅读全文

0 0