如何將復選框添加到JQuery Select2插件

Question

我正在使用jquery select2插件進行多次選擇。 在這里，我想為每個選擇選項添加一個復選框。

應根據選中/未選中attr復選框選擇下拉選項。

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();

演示

Answer 1

工作小提琴

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

希望這可以幫助。