步骤: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");
清空select 中的默认选中
$("select[name='name']").val(""); $("select[name='name']").chosen("destroy"); $("select[name='name']").chosen();
select 搜索功能,切勿忘引入js和css
<select name="name" class="chosen-select" id="id" data-placeholder="提示"> <option value="${value}">${name}</option> </select> $(".chosen-select").chosen();