Modifica della selezione in una selezione con il plug-in Chosen

105

Sto cercando di modificare l'opzione attualmente selezionata in una selezione con il plug-in Chosen.

La documentazione copre l'aggiornamento dell'elenco e l'attivazione di un evento quando viene selezionata un'opzione, ma nulla (che posso vedere) sulla modifica esterna del valore attualmente selezionato.

Ho creato un jsFiddle per dimostrare il codice e i miei tentativi di modificare la selezione:

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

— GAK
fonte

Non sono riuscito a eseguire la dimostrazione di jsfiddle che hai fornito. potresti aggiornarlo per favore.

— Lucky

Va bene. Il motivo per cui non ho potuto eseguire la tua dimostrazione era che la libreria scelta puntava a un URL errato. Ecco il jsfiddle

— Lucky

214

Dalla sezione "Aggiornamento dinamico scelto" nei documenti : Devi attivare l'evento "scelto: aggiornato" sul campo

$(document).ready(function() {

    $('select').chosen();

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

});

NOTA: le versioni precedenti alla 1.0 utilizzavano quanto segue:

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

— Lucas Welper
fonte

6

Cordiali saluti: sono stati aggiornati alla 1.0 che ora utilizza chosen:updatedinvece diliszt:updated

— Henesnarfel

Sono inciampato qui mentre stavo cercando di trovare un modo per selezionare la migliore opzione attualmente corrispondente da un elenco di risultati di ricerca scelti a più selezioni (ogni volta che lo stato attivo è stato perso). Ecco un breve violino sulle mie esplorazioni. Non è necessario che l'evento attivi alcun evento. Forse è utile anche per qualcun altro ... :)

— Timo

nonostante il codice di cui sopra funziona, questo accade solo una volta. Voglio dire che se faccio di nuovo clic sul menu in cui è collegato il plugin scelto non assume il valore che è dentro val (). Perché questo potrebbe accadere

— Dimitris Papageorgiou

9

So che questo è un vecchio post, ma un modo più semplice per aggiornare è solo in una stringa: $('select').val(2).trigger("chosen:updated");

— Andrew Newby

10

@ Lucas Welper: dovresti anche cambiare $('select').val(2);in $('select').val(2).change();, perché la modifica dell'opzione selezionata di una selezione con jQuery non attiva l'evento di modifica e alcune persone potrebbero averne bisogno.

— macchineaddict

41

La mia risposta è in ritardo, ma voglio aggiungere alcune informazioni che mancano in tutte le risposte precedenti.

1) Se si desidera selezionare un valore singolo nella selezione prescelta.

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

2) Se si utilizza più selezioni scelte, potrebbe essere necessario impostare più valori contemporaneamente.

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

Informazioni raccolte dai seguenti link:
1) Chosen Docs
2) Chosen Github Discussion

— Aamir
fonte

Notando che "22", "25" ecc. Sono i valori, non l'HTML interno, ad esempio <option value = "25"> sometext </option>

— Fadi Bakoura

2

A volte è necessario rimuovere le opzioni correnti per manipolare le opzioni selezionate.

Ecco un esempio su come impostare le opzioni:

<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 (incluse le opzioni per aggiungere howto): https://jsfiddle.net/59x3m6op/1/

— Tobi G.
fonte

1

Per conto nel caso in cui il prescelto non ha valore ancora, aggiornamento var selected = mySelect.val();a var selected = mySelect.val() || [];posto.

— ElliotSchmelliot

0

In caso di più tipi di selezione e / o se si desidera rimuovere gli elementi già selezionati uno per uno, direttamente all'interno di un elenco a discesa, è possibile utilizzare qualcosa come:

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
fonte