前言：

在项目中用遇到下拉框左右选择的需求，而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;//将含关键字的指标名显示在左边select1for (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;//动态删除所有optionsfor (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报错也调了一会儿呢，大家要细心哟。希望小编的总结能给大家带来帮助。