首先，要引用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" οnchange="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>
