【问题标题】：How to add Check box to JQuery Select2 plugin如何将复选框添加到 JQuery Select2 插件
【发布时间】：2016-08-01 10:54:46
【问题描述】：
我正在使用 jquery select2 插件进行多项选择。在这里，我想为每个选择选项添加一个复选框。
应根据复选框选中/未选中属性选择下拉选项。
HTML：
<select multiple="multiple" id="e1" style="width:300px">
<option value="AL" selected> Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
JS：
$("#e1").select2();
Demo
【问题讨论】：
标签：
javascript
jquery
html
css
select2
【解决方案1】：
Working fiddle
您可以切换类而不是使用checkbox，请查看下面的示例。
HTML：
<select multiple="multiple" id="e1" style="width:300px">
<option value="AL" selected> Alabama</option>
<option value="Am" selected>Amalapuram</option>
<option value="An" selected>Anakapalli</option>
<option value="Ak" selected>Akkayapalem</option>
<option value="WY" selected>Wyoming</option>
</select>
<button type='button' id='submit'>Submit</button>
JS：
$("#e1").select2();
$('body').on('click','.select2-search-choice', function(){
$(this).toggleClass('selected')
})
$('body').on('click','#submit', function(){
$('#s2id_e1 .select2-search-choice.selected').each(function(){
console.log($(this).text());
})
})
CSS：
.select2-container-multi .select2-choices .select2-search-choice.selected{
background-color: #286090;
border-color: #204d74;
color: #FFF;
background-image : none;
}
希望这会有所帮助。