How to add Check box to JQuery Select2 plugin

Question

I am using jquery select2 plugin for multiple select. Here I want to add a checkbox for each select option.

The dropdown option should be selected based on the checkbox checked/unchecked 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();

Demo

look at this: http://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option. this should give you the first steps to implement your issue — Marouen Mhiri, Aug 01 '16 at 11:25

score 0 · Answer 1 · answered Aug 01 '16 at 11:31

Working fiddle

You could toggle class instead of using checkbox, check the example below.

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;
}

Hope this helps.

How to add Check box to JQuery Select2 plugin

1 Answers1