web-dev-qa-db-fra.com

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

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

$('button').click(function() {
    $('select').val(2);
    $('select').chosen().val(2);
    $('select').chosen().select(2);
});
javascriptjqueryselectjquery-chosen
93
gak

De la section "Mise à jour choisie de manière dynamique" de la docs : Vous devez déclencher l'événement "choisi: mis à jour" sur le champ.

$(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");
199
Lucas Welper

Ma réponse est en retard, mais je veux ajouter quelques 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 plusieurs sélections choisies, 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) Documents choisis
2) Discussion choisie par Github

34
Aamir

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

Voici un exemple comment définir 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/

1
Tobi G.

Dans le cas de multiple type de sélection et/ou si vous souhaitez supprimer les éléments déjà sélectionnés un par un, directement dans 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');
});
0
SlavisaPetkovic