前端时间公司要做一个管理系统,在开发过程中需要用到下拉框中是复选框的需求。为了满足这种需求选择了jquery的multiSelect组件,可能是我对该组件了解不够彻底,在使用过程中,在一个页面可能出现多个下拉框带复选框的情况,而该组件不能满足,于是在使用的过程中,将jquery.multiSelect.js进行了修改。
先说一下在使用过程中的几个问题:
原js中这段代码是没有注释掉的,但是在使用中,我想手动向选择框中添加值,由于selectAll的属性原因,在使用jquery给下拉框设置显示值时无效,将该段代码注释掉就可以了。
2:之所以一个界面不能同时使用多个下拉框是因为,组件生成的下拉框的id是相同,所以只需要修改生成的id不相同就可以我的修改如下:
另外在使用过程由于样式问题,还修改了其他的地方,但是改动都比较小。
使用方法:
js调用初始化下拉框:
//jquery multiSelect 插件,自己对他的js、css做了修改
$("#selectProductManager").multiSelect({
selectAll: false,
//高度属性是区分了编译后形成的span的id,span的id为selectChooseValue+listHeight的值
//生成的checkbox的onclick事件的function是 select的id+Choose
listHeight:150
});
//下拉框下选中事件
function selectProductManagerChoose(){
var value = "";
var inputValue="";
var allSelect = document.getElementsByName("selectProductManager");
for(var i=0;i<allSelect.length;i++){
if(allSelect[i].checked){
var index = allSelect[i].value.indexOf("-");
inputValue = inputValue+","+allSelect[i].value.substr(0,index);
value = value+","+allSelect[i].value.substr(index+1,allSelect[i].value.length);
}
}
value = value.substr(1,value.length);
inputValue = inputValue.substr(1,inputValue.length);
$("#selectChooseValue150").html(value);
$("#addProductManagerIds").val(inputValue);
}