jquery - example - ''Seleccionar todo'' y ''Eliminar todo'' con chosen.js

jquery chosen select option

Question

Para el complemento de menú de selección chosen.js , ¿existe una forma establecida de agregar la función ''seleccionar todos los elementos de la lista'' o ''eliminar todos los elementos de la lista'' a una entrada de selección múltiple? ¿En la rama principal o quizás en una de las horquillas? ¿O alguien ha hecho esto antes tiene algunos consejos?

Answer 1

Debería ser bastante sencillo, primero hazlo de la manera "normal" primero:

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

Luego, active el evento liszt:updated para actualizar el widget elegido, para que todo se vea así:

Actualización : Para aquellos que no se desplazan hacia abajo y comprueban las otras respuestas , el evento se llama chosen:updated partir de una versión lanzada en agosto de 2013. Consulte la documentation si tiene dudas.

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

Demostración de trabajo (el código js está en la parte inferior): http://jsfiddle.net/C7LnL/1/

Versión más estricta: http://jsfiddle.net/C7LnL/2/

Versión aún más estricta: http://jsfiddle.net/C7LnL/3/

Answer 2

Deberías probar esto:

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

Answer 3

Me doy cuenta de que esta pregunta es bastante antigua, pero me encontré con un problema similar y quería compartir mi resultado, ya que me gusta su simplicidad:

Creé dos botones (todos y ninguno) y los coloqué a izquierda y derecha dentro del div que contiene mi menú desplegable de selección. Los botones se ven algo así:

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

Luego agregué algunos Jquery para manejar las acciones de los botones:

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

Probablemente necesite un poco de limpieza con respecto al diseño, pero es bastante funcional y pensé que lo compartiría.

Answer 4

Me perdí la característica similar. Esto agrega los dos enlaces Todos y Ninguno (textos personalizables a través de las opciones uncheck_all_text y select_all_text) en la parte superior de la lista emergente. Puede que necesite editar esto si usa agrupación.

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

También estoy usando un CSS para limitar la altura de las elecciones seleccionadas en caso de que haya decenas de ellas:

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

Answer 5

Prueba este código funcionará al 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'');

Answer 6

Sólo forma directa de borrar la selección:

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

Answer 7

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

limpiar todo

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

seleccionar todo