Question 'select all' et 'remove all' avec selected.js


Pour le plugin menu de sélection choisis.js, existe-t-il un moyen établi d’ajouter «Sélectionner tous les éléments dans la liste» ou «Supprimer tous les éléments de la liste» dans une entrée de sélection multiple? Dans la branche principale ou peut-être dans l’une des fourches? Ou quelqu'un a-t-il déjà fait cela, a-t-il des conseils?


23
2018-06-23 19:15


origine


Réponses:


Il devrait être assez simple, faites-le d'abord de la manière "normale":

$('.my-select-all').click(function(){
    $('#my_select option').prop('selected', true); // Selects all options
});

Puis déclenchez le liszt:updated événement pour mettre à jour le widget choisi, alors le tout ressemblerait à ceci:


Mettre à jour: Pour ceux qui ne le font pas faire défiler et vérifier les autres réponses, l'événement s'appelle chosen:updated à partir d'une version publiée en août 2013. Consultez le Documentation en cas de doute.


<select multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<button class="select">Select all</button>
<button class="deselect">Deselect all</button>
$('select').chosen();
$('.select').click(function(){
    $('option').prop('selected', true);
    $('select').trigger('liszt:updated');
});
$('.deselect').click(function(){
    $('option').prop('selected', false);
    $('select').trigger('liszt:updated');
});​

Démo de travail (le code js est en bas): http://jsfiddle.net/C7LnL/1/

Version plus serrée: http://jsfiddle.net/C7LnL/2/

Version encore plus serrée: http://jsfiddle.net/C7LnL/3/


45
2018-06-23 19:36



Essayez ce code ça marchera à 100%

// Deselect All
$('#my_select_box option:selected').removeAttr('selected');
$('#my_select_box').trigger('chosen:updated');

// Select All
$('#my_select_box option').prop('selected', true);  
$('#my_select_box').trigger('chosen:updated');

7
2018-01-14 05:36



J'ai raté la fonctionnalité similaire. Cela ajoute les deux liens All et None (textes personnalisables via les options uncheck_all_text et select_all_text) en haut de la liste déroulante. Vous devrez peut-être modifier ceci si vous utilisez le regroupement.

$("select").on("chosen:showing_dropdown", function(evnt, params) {
    var chosen = params.chosen,
        $dropdown = $(chosen.dropdown),
        $field = $(chosen.form_field);
    if( !chosen.__customButtonsInitilized ) {
        chosen.__customButtonsInitilized = true;
        var contained = function( el ) {
            var container = document.createElement("div");
            container.appendChild(el);
            return container;
        }
        var width = $dropdown.width();
        var opts = chosen.options || {},
            showBtnsTresshold = opts.disable_select_all_none_buttons_tresshold || 0;
            optionsCount = $field.children().length,
            selectAllText = opts.select_all_text || 'All',
            selectNoneText = opts.uncheck_all_text || 'None';
        if( chosen.is_multiple && optionsCount >= showBtnsTresshold ) {
            var selectAllEl = document.createElement("a"),
                selectAllElContainer = contained(selectAllEl),
                selectNoneEl = document.createElement("a"),
                selectNoneElContainer = contained(selectNoneEl);
            selectAllEl.appendChild( document.createTextNode( selectAllText ) );
            selectNoneEl.appendChild( document.createTextNode( selectNoneText ) );
            $dropdown.prepend("<div class='ui-chosen-spcialbuttons-foot' style='clear:both;border-bottom: 1px solid black;'></div>");
            $dropdown.prepend(selectNoneElContainer);
            $dropdown.prepend(selectAllElContainer);
            var $selectAllEl = $(selectAllEl),
                $selectAllElContainer = $(selectAllElContainer),
                $selectNoneEl = $(selectNoneEl),
                $selectNoneElContainer = $(selectNoneElContainer);
            var reservedSpacePerComp = (width - 25) / 2;
            $selectNoneElContainer.addClass("ui-chosen-selectNoneBtnContainer")
                .css("float", "right").css("padding", "5px 8px 5px 0px")
                .css("max-width", reservedSpacePerComp+"px")
                .css("max-height", "15px").css("overflow", "hidden");
            $selectAllElContainer.addClass("ui-chosen-selectAllBtnContainer")
                .css("float", "left").css("padding", "5px 5px 5px 7px")
                .css("max-width", reservedSpacePerComp+"px")
                .css("max-height", "15px").css("overflow", "hidden");
            $selectAllEl.on("click", function(e) {
                e.preventDefault();
                $field.children().prop('selected', true);
                $field.trigger('chosen:updated');
                return false;
            });
            $selectNoneEl.on("click", function(e) {
                e.preventDefault();
                $field.children().prop('selected', false);
                $field.trigger('chosen:updated');
                return false;
            });
        }
    }
});

J'utilise aussi un CSS pour limiter la hauteur des choix choisis au cas où il y en aurait des dizaines:

    .chosen-choices {
        max-height: 150px;
    }

4
2017-09-13 11:31



Juste un moyen simple d'effacer la sélection:

$('select').val('');
$('select').val('').trigger("chosen:updated"); 

1
2018-06-19 05:09



Je me rends compte que cette question est assez ancienne, mais je suis tombé sur un problème similaire et je voulais partager mon résultat, car j'aime sa simplicité:

J'ai créé deux boutons (tous et aucun) et les ai flottés à gauche et à droite dans la div contenant ma liste déroulante de sélection. Les boutons ressemblent à ceci:

<button style="float:left;" class="btn" id="iAll">All</button>
<button style="float:right;" class="btn" id="iNone">None</button>

Ensuite, j'ai ajouté quelques jquery pour gérer les actions du bouton:

$('#iAll').on('click', function(e){
  e.preventDefault();
  $('#iSelect option').prop('selected', true).trigger('chosen:updated');
});

$('#iNone').on('click', function(e){
  e.preventDefault();
  $("#iSelect option:selected").removeAttr("selected").trigger('chosen:updated');
});

Sera probablement besoin de nettoyage en ce qui concerne la mise en page, mais il est assez fonctionnel tel quel et je pensais partager.


1
2018-02-28 20:58



$("#ctrlName option:selected").removeAttr("selected").trigger('liszt:updated'); 

tout effacer

$("#ctrlName option").attr("selected","selected").trigger('liszt:updated'); 

tout sélectionner


-1
2018-02-25 10:56



Vous devriez essayer ceci:

$('#drpdwn').empty();
$('#drpdwn').trigger('chosen:updated');

-3
2018-05-09 13:11