'seleccionar todo' y 'eliminar todo' con choose.js

Question

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

Answer 1

Cabe bastante sencillo, simplemente hacerlo de la manera "normal" en primer lugar:

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

después dispare el evento liszt:updated para actualizar el widget elegido, por lo que todo el asunto sería algo como esto:

---

actualización: Para aquellos que no scroll down and check the other answers, el evento se llama chosen:updated partir de una versión lanzada en agosto de 2013. Consulte la documentation si en duda.

---

<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 (código JS está en la parte inferior): http://jsfiddle.net/C7LnL/1/

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

versión aún más fuerte: http://jsfiddle.net/C7LnL/3/

Answer 2

echaba de menos th e característica similar. Esto agrega los dos enlaces Todos y Ninguno (textos personalizables mediante las opciones desmarcar_todo_textual y seleccionar_todo_textual) en la parte superior de la lista emergente. Es posible que deba editar esto si usa la 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 Oferta de seleccionados en caso de que haya dicen que decenas de ellos:

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

Answer 3

usted debe tratar esto:

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

Answer 4

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

borrar todo

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

seleccionar todos

Answer 5

Prueba este código va a trabajar 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

camino, del mismo recta de la limpieza de la selección:

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

Answer 7

realizo esta pregunta es bastante antiguo, pero me vino sobre un problema similar y quería compartir mi resultado, como me gusta es la simplicidad:

Creé dos botones (todos y ninguno) y flo ated a izquierda y derecha dentro del div que contiene mi menú desplegable de selección.Los botones tienen el siguiente aspecto:

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

Luego añade un poco de 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'); 
}); 

probable que necesite una limpieza en cuanto a diseño, pero es bastante funcional como está y Pensé que lo compartiría.