因一老项目需要改造原select选择框为多选框,选定使用multiple-select完成。
官方示例地址:http://multiple-select.wenzhixin.net.cn/examples
git资源地址:https://github.com/wenzhixin/multiple-select
需要再代码中引入文件
multiple-select.min.css
multiple-select.min.js
multiple-select-zh-CN.min.js (如不引入,全选会显示select all,不影响功能使用)
HTML代码(注意select不要含有其他class,OPTION我是动态赋值的随其他菜单联动)
<div class="col-sm-8" id="partdiv" >
<select id="part" multiple style="width:300px;" >
</select>
</div>
JS代码(插入到初始化函数)
$("#part").multipleSelect({
placeholder:"请选择",
selectAll:"true",
width:"200",
selectAllText:"全选",
container:"body",
allSelected:'已全选',
countSelected:'#项已选中'
});
option联动代码
cities和citie为相同数组。
function set_city(corp, city) {
var city1;
var pv, cv;
var i, ii;
document.getElementById("partdiv").innerHTML="<select id='part' name='part' multiple style='width:300px;' οnchange='partchange(this,this.form.partno_select)'></select>";
city1=document.getElementById("part");
pv=corp.value;
city1.length=1;
var destOpts = city1.options;
if(pv=='') return;
if(typeof(cities[pv])=='undefined') return;
for(i=0; i<cities[pv].length; i++)
{
ii = i;
city1.options[ii] = new Option();
city1.options[ii].text = cities[pv][i];
city1.options[ii].value = cities[pv][i];
}
$("#part").multipleSelect({
placeholder:"请选择",//初始话文字设置
selectAll:"true",//支持全选
width:"200",//设置控件宽度
selectAllText:"全选",//全选text
container:"body",//重新选择空间显示的范围,这里遇到一个问题,就是下拉ms-drop显示不全,这里是区域问题,在这设置一下就ok
allSelected:'已全选',//全选以后显示text
countSelected:'#项已选中'//已选中的项数
});
}
function partchange(city,partno) {
var i, ii;
var pv=document.getElementById("corp_select").value;
var cv=$("#part").multipleSelect('getSelects','value');
var cvarr=new Array();
var no=partno;
cv=cv.toString();
cvarr=cv.split(",");
no.value=''
if (cv=='其他') {
no.value='';
no.disabled=false;
return;
};
for(i=0; i<cities[pv].length; i++)
{
for(ii=0; ii<cvarr.length; ii++)
{
if (cvarr[ii]==cities[pv][i] && cvarr[ii]!=='其他') {no.value=no.value+","+citiesno[pv][i]}
}
}
no.value=no.value.substr(1); //删除第一个‘,’字符
}