multiple-select下拉多选框使用(新增)

安高义
2023-12-01

因一老项目需要改造原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);  //删除第一个‘,’字符
  }
 类似资料: