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

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