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

105

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

— gak
source

Je n'ai pas pu exécuter la démonstration jsfiddle que vous avez fournie. pourriez-vous s'il vous plaît le mettre à jour.

— Lucky

D'accord. La raison pour laquelle je n'ai pas pu exécuter votre démonstration était que la bibliothèque choisie indiquait une URL incorrecte. Voici le jsfiddle

— Lucky

214

À 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");

— Lucas Welper
source

6

FYI: ils ont mis à jour à 1.0 qui utilise maintenant à la chosen:updatedplace deliszt:updated

— Henesnarfel

Je suis tombé ici alors que j'essayais de trouver un moyen de sélectionner la meilleure option actuellement correspondante dans une liste de résultats de recherche à sélection multiple (chaque fois que le focus était perdu). Voici un petit violon sur mes explorations. Vous n'avez pas besoin d'événement pour déclencher des événements. Peut-être, il est utile pour quelqu'un d'autre aussi ... :)

— Timo

malgré que les travaux de code ci - dessus, cela ne se produit que once.I signifie si je clique à nouveau menu où plug - in choisi est attaché ne prend pas la valeur qui est à l' intérieur val () Pourquoi cela pourrait se produire.

— Dimitris Papageorgiou

9

Je sais que c'est un ancien message - mais un moyen plus simple de mettre à jour est juste en une seule chaîne: $('select').val(2).trigger("chosen:updated");

— Andrew Newby

10

@Lucas Welper: vous devriez également changer $('select').val(2);en $('select').val(2).change();, car la modification de l'option sélectionnée d'un select avec jQuery ne déclenche pas l'événement de changement et certaines personnes pourraient en avoir besoin.

— machineaddict

41

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

— Aamir
source

Notant que "22", "25" etc. sont les valeurs, pas le HTML interne, par exemple <option value = "25"> parfois </option>

— Fadi Bakoura

2

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/

— Tobi G.
source

1

Pour tenir compte du cas où la sélection n'a pas encore de valeur, mettez var selected = mySelect.val();à jour à la var selected = mySelect.val() || [];place.

— ElliotSchmelliot

0

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

— SlavisaPetkovic
source