用multiselect实现下拉框下面的复选

来源：互联网发布：西安编程零基础培训编辑：程序博客网时间：2024/05/17 06:03

首先，要引用multiselect的JS和CSS文件，还有jQuery.js;

其次，在html的body里面添加select标签，要注意的是select标签的multiple属性要设置（multiple=multiple），并添加onchange事件；

然后，onchange事件卸载js标签里面；

最后，切记在ready方法里面初始化select下拉框；

具体代码如下：

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>  <link type="text/css" href="../css/jquery/jquery-ui-1.8.2.custom.css" rel="stylesheet" /> <link href="../css/jquery/jquery.multiselect.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../js/jquery/jquery-1.7.2.min.js"></script><script type="text/javascript" src="../js/jquery/jquery-ui-1.8.2.custom.min.js"></script><script type="text/javascript" src="../js/jquery/jquery.multiselect.js"></script><script type="text/javascript">$(document).ready(function(){    //设置select的样式（初始化select的样式）   $("#_multiselect_CLS_CGRT").multiselect({            multiple: true,            header: false,            noneSelectedText: '请选择',            selectedList:5,            minWidth:200,//隐藏显示框的宽            height:160        });}); //onchange的具体实现function fj_multi_class(){var codeStr= '01,02,03,04,05,06'; var idcs= ''; $("input[name='multiselect__multiselect_CLS_CGRT']:checkbox:checked").each(function(){  idcs += $(this).val() + ',';}); var tempStr = idcs.split(','); var codeArrStr = codeStr.split(','); var onStr = '';  var unStr = '';  var str = '' ; for(var i=0; i<tempStr.length; i++){if(tempStr[i]==codeArrStr[i]){ onStr += tempStr[i] + ','; }else{ unStr += tempStr[i] + ',';}}  onStr = onStr.substr(0,onStr.length-1); unStr = unStr.substr(0,unStr.length-1); if(onStr.split(',').length==6 && unStr == ''){str = onStr; $("#_multiselect_CLS_CGRT").multiselect({selectedList: 1,  selectedText: '全部'});}else if((onStr=='' && unStr == '') || (null == onStr && null == unStr)){$("#_multiselect_CLS_CGRT").multiselect({selectedList: 0,selectedText: '请选择'});}else{str = onStr + '' + unStr;   $("#_multiselect_CLS_CGRT").multiselect({selectedList: 0,    selectedText: '已选择'      });   }   }    </script> </head> <body>  <span>价　　类：<select id="_multiselect_CLS_CGRT" class = '_multiselect_CLS_CGRT' name="_multiselect_CLS_CGRT" multiple="multiple" onchange="fj_multi_class(this)"><option value='01'>一类</option><option value='02'>二类</option><option value='03'>三类</option><option value='04'>四类</option><option value='05'>五类</option><option value='06'>无价类</option></select></span>  </body></html>

0 0