Changer la sélection dans une sélection avec le plugin Chosen

Question

J'essaie de changer l'option sélectionnée dans une sélection avec le plugin Chosen.

En la documentation couvre la mise à jour de la liste et le déclenchement d'un événement lorsqu'une option est sélectionnée, mais rien (que je puisse voir) sur la modification externe de la valeur actuellement sélectionnée.

J'ai fait une jsFiddle pour démontrer le code et mes tentatives de modification de la sélection :

$('button').click(function() {
    $('select').val(2);
    $('select').chosen().val(2);
    $('select').chosen().select(2);
});

Answer 1

A partir de la section "Mise à jour dynamique des choix" de la rubrique documents : Vous devez déclencher l'événement "chosen:updated" sur le champ.

$(document).ready(function() {

    $('select').chosen();

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

});

NOTE : les versions antérieures à la version 1.0 utilisaient ce qui suit :

$('select').trigger("liszt:updated");

Answer 2

Ma réponse est tardive, mais je souhaite ajouter une information qui n'a pas été mentionnée dans toutes les réponses précédentes.

1) Si vous souhaitez sélectionner une seule valeur dans la sélection choisie.

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

2) Si vous utilisez une sélection multiple, il se peut que vous deviez définir plusieurs valeurs en même temps.

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

Informations recueillies à partir des liens suivants :
1) Docs choisis
2) Discussion Github choisie

Answer 3

Il faut parfois supprimer les options en cours pour pouvoir manipuler les options sélectionnées.

Voici un exemple de définition des options :

<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 (y compris les options d'ajout) : https://jsfiddle.net/59x3m6op/1/

Answer 4

En cas de multiples et/ou si vous souhaitez supprimer des éléments déjà sélectionnés un par un, directement dans les éléments d'une liste déroulante, vous pouvez utiliser quelque chose comme :

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