Select2 mit einer Checkbox-Liste für einen Mehrfach wählen

Question

ich wählt ähnlich wie diese http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

Ich mag implementieren müssen select2 dafür verwenden, aber ich habe nicht in der Lage gewesen, etwas von dem Schöpfer des select2 zu finden das würde diesen Dropdown-Stil mit Checkboxen darin unterstützen. Kennt jemand einen Weg, dies zu tun?

Answer 1

Ich habe ein ähnliches Bedürfnis konfrontiert, konnte es aber nicht finden.

Die Lösung Ich habe über kam, war die Fahne closeOnSelect auf false gesetzt

$("#yadayada").select2({closeOnSelect:false}); http://jsfiddle.net/jEADR/521/

Answer 2

mit Scheint diese alte Post, aber da es sehr weit verbreitetes Problem ist, die Entsendung I`m dies hier .

fand ich, dass der Autor bereits ein Plugin für diese Funktion Select2 hinzugefügt wird Checkbox-ähnliche Auswahl und die Drop-down zu haben, nicht verstecken auf Klick:

https://github.com/wasikuss/select2-multi-checkboxes

Beispiel:

$('.select2-multiple').select2MultiCheckboxes({ 
    placeholder: "Choose multiple elements", 
}) 

http://jsfiddle.net/wasikuss/gx93rwnk/

Alle anderen Funktionen von select2 bleiben erhalten. Es gibt nur wenige vordefinierte Optionen, die richtig funktionieren.

Answer 3

Ich schaffte es, etwas zusammenzusetzen, nicht perfekt, aber es funktioniert.

https://jsfiddle.net/Lkkm2L48/7/

jQuery(function($) { 
    $.fn.select2.amd.require([ 
    'select2/selection/single', 
    'select2/selection/placeholder', 
    'select2/selection/allowClear', 
    'select2/dropdown', 
    'select2/dropdown/search', 
    'select2/dropdown/attachBody', 
    'select2/utils' 
    ], function (SingleSelection, Placeholder, AllowClear, Dropdown, DropdownSearch, AttachBody, Utils) { 

     var SelectionAdapter = Utils.Decorate(
     SingleSelection, 
     Placeholder 
    ); 

    SelectionAdapter = Utils.Decorate(
     SelectionAdapter, 
     AllowClear 
    ); 

    var DropdownAdapter = Utils.Decorate(
     Utils.Decorate(
     Dropdown, 
     DropdownSearch 
    ), 
     AttachBody 
    ); 

     var base_element = $('.select2-multiple2') 
    $(base_element).select2({ 
     placeholder: 'Select multiple items', 
     selectionAdapter: SelectionAdapter, 
     dropdownAdapter: DropdownAdapter, 
     allowClear: true, 
     templateResult: function (data) { 

     if (!data.id) { return data.text; } 

     var $res = $('<div></div>'); 

     $res.text(data.text); 
     $res.addClass('wrap'); 

     return $res; 
     }, 
     templateSelection: function (data) { 
     if (!data.id) { return data.text; } 
     var selected = ($(base_element).val() || []).length; 
     var total = $('option', $(base_element)).length; 
     return "Selected " + selected + " of " + total; 
     } 
    }) 

    }); 

}); 

CSS:

.select2-results__option .wrap:before{ 
    font-family:fontAwesome; 
    color:#999; 
    content:"\f096"; 
    width:25px; 
    height:25px; 
    padding-right: 10px; 

} 
.select2-results__option[aria-selected=true] .wrap:before{ 
    content:"\f14a"; 
} 

Answer 4

Eine andere Lösung ist es, "prepend" mit CSS Checkbox Icons. Ich benutze Bootstrap-Thema - Ihr select2-Container kann anders sein.

.select2-container--bootstrap .select2-results__option[aria-selected=true]:before { content:'\e067 '; padding:0 8px 0 0px; font-family:'Glyphicons Halflings' } 
.select2-container--bootstrap .select2-results__option:before { content:'\e157 '; padding:0 8px 0 0px; font-family:'Glyphicons Halflings' } 

Answer 5

In nur zwei Emojis mit CSS

.select2-results__options { 
    &[aria-multiselectable=true] { 

     .select2-results__option { 
      &[aria-selected=true]:before { 
       content: '☑'; 
       padding: 0 0 0 4px; 
      } 

      &:before { 
       content: '◻'; 
       padding: 0 0 0 4px; 
      } 
     } 
    } 
} 

Sie dieses Beispiel sehen ein RTL mit Emoji basierend Checkbox Select2