Wie Sie das Kontrollkästchen zu JQuery Select2 Plugin hinzufügen

Question

Ich benutze jquery select2 Plugin für mehrere auswählen. Hier möchte ich ein Kontrollkästchen für jede Auswahloption hinzufügen.

Die Dropdown-Option sollte basierend auf dem Kontrollkästchen aktiviert/deaktiviert werden.

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

Answer 1

Working fiddle

Sie können die Klasse wechseln, anstatt checkbox zu verwenden, überprüfen Sie das folgende Beispiel.

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

Hoffnung, das hilft.