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

前言：

在项目中用遇到下拉框左右选择的需求，而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报错也调了一会儿呢，大家要细心哟。希望小编的总结能给大家带来帮助。