Cambiar la selección en una selección con el complemento elegido

105

Estoy intentando cambiar la opción seleccionada actualmente en una selección con el complemento Elegido.

La documentación cubre la actualización de la lista y la activación de un evento cuando se selecciona una opción, pero nada (que pueda ver) sobre el cambio externo del valor seleccionado actualmente.

Hice un jsFiddle para demostrar el código y mis intentos de cambiar la selección:

$('button').click(function() {
    $('select').val(2);
    $('select').chosen().val(2);
    $('select').chosen().select(2);
});
gak
fuente
No pude ejecutar la demostración de jsfiddle que proporcionó. ¿Podrías actualizarlo?
Lucky
Bueno. La razón por la que no pude ejecutar su demostración fue que la biblioteca elegida apuntaba a una URL incorrecta. Aquí está el jsfiddle
Lucky

Respuestas:

214

De la sección "Actualizar elegidos dinámicamente" en los documentos : debe activar el evento 'elegido: actualizado' en el campo

$(document).ready(function() {

    $('select').chosen();

    $('button').click(function() {
        $('select').val(2);
        $('select').trigger("chosen:updated");
    });

});

NOTA: las versiones anteriores a la 1.0 usaban lo siguiente:

$('select').trigger("liszt:updated");
Lucas Welper
fuente
6
Para su información: se han actualizado a 1.0, que ahora usa en chosen:updatedlugar deliszt:updated
Henesnarfel
Me tropecé aquí mientras intentaba encontrar una manera de seleccionar la mejor opción que coincida actualmente de una lista de resultados de búsqueda elegida de selección múltiple (siempre que se pierda el enfoque). Aquí hay un pequeño violín sobre mis exploraciones. No es necesario que el evento active ningún evento. Quizás, también sea útil para otra persona ... :)
Timo
a pesar de que el código anterior funciona, esto sucede solo una vez. Quiero decir, si hago clic de nuevo en el menú donde se adjunta el complemento elegido, no toma el valor que está dentro de val (). Por qué podría estar sucediendo esto
Dimitris Papageorgiou
9
Sé que esta es una publicación antigua, pero una forma más sencilla de actualizar es solo en una cadena: $('select').val(2).trigger("chosen:updated");
Andrew Newby
10
@Lucas Welper: también debería cambiarse $('select').val(2);a $('select').val(2).change();, porque cambiar la opción seleccionada de una selección con jQuery no activa el evento de cambio y algunas personas pueden necesitarlo.
machineaddict
41

Mi respuesta es tardía, pero quiero agregar información que se perdió en todas las respuestas anteriores.

1) Si desea seleccionar un valor único en la selección elegida.

$('#select-id').val("22").trigger('chosen:updated');

2) Si está utilizando una selección múltiple, es posible que deba establecer varios valores al mismo tiempo.

$('#documents').val(["22", "25", "27"]).trigger('chosen:updated');

Información recopilada de los siguientes enlaces:
1) Documentos elegidos
2) Discusión de Github elegidos

Aamir
fuente
Observando que "22", "25", etc. son los valores, no el HTML interno, por ejemplo <option value = "25"> sometext </option>
Fadi Bakoura
2

A veces es necesario eliminar las opciones actuales para poder manipular las opciones seleccionadas.

A continuación, se muestra un ejemplo de cómo configurar opciones:

<select id="mySelectId" class="chosen-select" multiple="multiple">
  <option value=""></option>
  <option value="Argentina">Argentina</option>
  <option value="Germany">Germany</option>
  <option value="Greece">Greece</option>
  <option value="Japan">Japan</option>
  <option value="Thailand">Thailand</option>
</select>

<script>
activateChosen($('body'));
selectChosenOptions($('#mySelectId'), ['Argentina', 'Germany']);

function activateChosen($container, param) {
    param = param || {};
    $container.find('.chosen-select:visible').chosen(param);
    $container.find('.chosen-select').trigger("chosen:updated");
}

function selectChosenOptions($select, values) {
    $select.val(null);                                  //delete current options
    $select.val(values);                                //add new options
    $select.trigger('chosen:updated');
}
</script>

JSFiddle (incluido cómo agregar opciones): https://jsfiddle.net/59x3m6op/1/

Demasiado grande.
fuente
1
Para tener en cuenta el caso en el que la selección aún no tiene valor, actualice var selected = mySelect.val();a var selected = mySelect.val() || [];.
ElliotSchmelliot
0

En caso de varios tipos de selección y / o si desea eliminar elementos ya seleccionados uno por uno, directamente dentro de los elementos de una lista desplegable, puede usar algo como:

jQuery("body").on("click", ".result-selected", function() {
    var locID = jQuery(this).attr('class').split('__').pop();
    // I have a class name: class="result-selected locvalue__209"
    var arrayCurrent = jQuery('#searchlocation').val();
    var index = arrayCurrent.indexOf(locID);
    if (index > -1) {
        arrayCurrent.splice(index, 1);
    }
    jQuery('#searchlocation').val(arrayCurrent).trigger('chosen:updated');
});
SlavisaPetkovic
fuente