it-swarm.com.de

'select all' und 'remove all' mit selected.js

Gibt es für das Auswahlmenü plugin chosen.js einen etablierten Weg, um die Funktion "Alle Elemente in der Liste auswählen" oder "Alle Elemente in der Liste entfernen" zu einem Multiple Select-Eingang hinzuzufügen? In der Hauptniederlassung oder vielleicht in einer der Gabeln? Oder hat jemand das schon mal gemacht, hat ein paar Tipps?

24
Petrov

Es sollte ziemlich einfach sein, tun Sie es zuerst auf "normale" Weise:

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

Dann lösen Sie das liszt:updated -Ereignis aus, um das ausgewählte Widget zu aktualisieren, sodass das Ganze ungefähr so ​​aussehen würde:


Update: Für diejenigen, die nicht nach unten scrollen und die anderen Antworten überprüfen heißt das Ereignis ab einer im August 2013 veröffentlichten Version chosen:updated. Konsultieren Sie die Dokumentation im Zweifelsfall.


<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');
});​

Funktionsdemo (js-Code befindet sich unten): http://jsfiddle.net/C7LnL/1/

Engere Version: http://jsfiddle.net/C7LnL/2/

Noch engere Version: http://jsfiddle.net/C7LnL/3/

46
Wesley Murch

Versuchen Sie diesen Code, es wird 100% funktionieren

// 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');
8

Ich habe die ähnliche Funktion vermisst. Dies fügt die beiden Links All und None (Texte, die durch die Optionen uncheck_all_text und select_all_text anpassbar sind) oben in der Popup-Liste hinzu. Sie müssen dies möglicherweise bearbeiten, wenn Sie die Gruppierung verwenden.

$("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;
            });
        }
    }
});

Ich verwende auch ein CSS, um die Höhe der ausgewählten Auswahl zu begrenzen, falls es Dutzende davon gibt:

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

Einfacher Weg, um die Auswahl zu löschen:

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

Mir ist klar, dass diese Frage ziemlich alt ist, aber ich bin auf ein ähnliches Problem gestoßen und wollte mein Ergebnis teilen, da es mir einfach gefällt:

Ich habe zwei Buttons (alle und keine) erstellt und sie nach links und rechts in das Div geschoben, das meine Auswahlliste enthält. Die Knöpfe sehen ungefähr so ​​aus:

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

Dann habe ich ein paar Jquery hinzugefügt, um die Tastenaktionen auszuführen:

$('#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');
});

Ich werde wahrscheinlich ein paar Aufräumarbeiten in Bezug auf das Layout benötigen, aber es ist ziemlich funktionell und ich dachte, ich würde es teilen.

1
DLux