web-dev-qa-db-fra.com

Select2 avec une liste de cases à cocher pour une sélection multiple

Je dois implémenter une sélection similaire à celle-ci http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

Je veux utiliser select2 pour cela, mais je n'ai pas pu trouver quoi que ce soit du créateur de select2 qui prendrait en charge ce style de liste déroulante avec des cases à cocher. Est-ce que quelqu'un sait comment faire ceci?

jquery-select2
20
Tekdahl

J'ai fait face à un besoin similaire mais je n'ai pas pu le trouver.

La solution que j'ai trouvée consistait à utiliser l'indicateur closeOnSelect défini sur false

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

13
Alexandre Pires

Il semble que ce soit un ancien message, mais comme c'est un problème très courant, je le poste ici.

J'ai trouvé que l'auteur avait déjà ajouté un plugin à select2 pour que cette fonctionnalité ait une sélection de type case à cocher et le menu déroulant ne se cache pas au clic:

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

Exemple:

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

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

Toutes les autres fonctionnalités de select2 sont conservées. Il existe quelques autres options prédéfinies qui fonctionnent correctement.

10
Vasil Popov

J'ai réussi à assembler quelque chose, pas parfait, mais ça marche.

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";
}
4
Willem

Ajoutez seulement deux emoji avec 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;
            }
        }
    }
}

Vous voyez cet exemple d'une case à cocher RTL select2 avec emoji RTL select2 with emoji based checboxes

4
AmirMehdi KhademAstaneh

Une autre solution consiste à ajouter des icônes de case à cocher à l'aide de CSS. J'utilise bootstrap theme - votre conteneur select2 peut être différent.

.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' }
1
AnkitK