Modification de la sélection dans une sélection avec le plugin Chosen

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

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 peux voir) sur la modification externe de la valeur actuellement sélectionnée.

J'ai créé un jsFiddle pour illustrer 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);
});

À partir de la section "Mettre à jour le choix dynamiquement" dans la documentation : vous devez déclencher l'événement "choisi: mis à jour" sur le terrain

$(document).ready(function() {

    $('select').chosen();

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

});

REMARQUE: les versions antérieures à 1.0 utilisaient les éléments suivants:

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

Ma réponse est tardive, mais je veux ajouter des informations qui manquent dans toutes les réponses ci-dessus.

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

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

2) Si vous utilisez la sélection multiple, vous devrez peut-être définir plusieurs valeurs à la fois.

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

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

Parfois, vous devez supprimer les options actuelles afin de manipuler les options sélectionnées.

Voici un exemple de configuration 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 comment ajouter des options): https://jsfiddle.net/59x3m6op/1/

En cas de type multiple de sélection et / ou si vous souhaitez supprimer les é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');
});