本篇教程介绍了jQuery教程之jQuery chosen插件实现select多选，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<

步骤：1、js
2、在select标签上添加 multiple="multiple" 属性
3、添加class=" chosen-select" 属性
即可实现多选
 
默认值选定：
　　1、获取标签默认值，根据格式拆分数据
　　2、使用  
　　　

$(‘.chosen-select‘).chosen({
   allow_single_deselect : true
  });
  
  $(‘.chosen-select‘).trigger("liszt:updated");  


　　
　　eg:

<div class="form-group ">
  <label class="col-sm-2 control-label no-padding-right" for="moonComplications">中期并发症：</label> 
  <select multiple="multiple" class="col-xs-5 col-sm-3 chosen-select" name="moonComplications">
   <option value="ADIPOSEATROPHY">注射部位皮下脂肪萎缩或增生</option>
   <option value="JOINTILL">关节活动障碍</option>
   <option value="GROWSICK">生长障碍</option>
   <option value="CATARACT">白内障</option>
   <option value="OSTEOPOROSIS">骨质疏松</option>
  </select>
 </div>


　　

var $disease = $(‘#diseaseTable‘);
  $(‘#editDisease‘).click(
    function() {
     var objs = $disease.find(‘span‘);
     for ( var index in objs) {
      var obj = objs.eq(index);
      if(obj.attr(‘id‘) == ‘fastComplications‘ || obj.attr(‘id‘) == ‘moonComplications‘ || obj.attr(‘id‘) == ‘slowComplications‘){
       var value = obj.text();
       var selValue = value.split(‘,‘);
       for ( var sel in selValue) {
        $("select[name=‘"+obj.attr(‘id‘)+"‘]").chosen("destroy"); 
        $("select[name=‘"+obj.attr(‘id‘)+"‘] option[value=‘"+selValue[sel]+"‘]").attr("selected","selected");  
        $("select[name=‘"+obj.attr(‘id‘)+"‘]").trigger("liszt:updated");
        $("select[name=‘"+obj.attr(‘id‘)+"‘]").chosen({
         allow_single_deselect : true
        });
       }
      }else{
       $diseaseDialog.find("[name=‘" + obj.attr(‘id‘) + "‘]")
        .val(obj.text());
      }
     }
     //打开对话框
     $diseaseDialog.dialog($.extend(dialogOption, {
      title : "修改"
     }));
     $diseaseDialog.dialog("open");
    });


　　

 $(‘.chosen-select‘).chosen({
   allow_single_deselect : true
  });
  
  $(‘.chosen-select‘).trigger("liszt:updated");  
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！