如何将复选框添加到JQuery Select2插件中

How to add Check box to JQuery Select2 plugin

本文关键字：JQuery Select2 插件 添加 复选框      更新时间：2023-09-26

我使用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();

演示

工作小提琴

您可以切换类而不是使用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;
}

希望这能有所帮助。

相关文章：