Zmiana zaznaczenia za pomocą wybranej wtyczki

105

Próbuję zmienić aktualnie wybraną opcję w zaznaczeniu za pomocą wybranej wtyczki.

W dokumentacji obejmuje aktualizację listy i wywołania zdarzenia, gdy jest wybrana opcja, ale nic (to widzę) na zewnątrz zmianę aktualnie wybranej wartości.

Zrobiłem jsFiddle, aby zademonstrować kod i moje próby zmiany zaznaczenia:

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

— gak
źródło

Nie mogłem uruchomić dostarczonej przez ciebie demonstracji jsfiddle. czy mógłbyś go zaktualizować.

— Lucky

W porządku. Nie mogłem uruchomić Twojej demonstracji, ponieważ wybrana biblioteka wskazywała na nieprawidłowy adres URL. Oto zaktualizowany plik jsfiddle

— Lucky

214

Z sekcji „Updating Chosen Dynamically” w dokumentach : Musisz wywołać zdarzenie „selected: updated” w polu

$(document).ready(function() {

    $('select').chosen();

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

});

UWAGA: wersje wcześniejsze niż 1.0 wykorzystywały następujące elementy:

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

— Lucas Welper
źródło

6

FYI: zaktualizowali do wersji 1.0, która teraz używa chosen:updatedzamiastliszt:updated

— Henesnarfel

Natknąłem się tutaj, próbując znaleźć sposób na wybranie najlepszej aktualnie pasującej opcji z listy wyników wyszukiwania z wieloma zaznaczeniami (za każdym razem, gdy utracono fokus). Oto krótkie skrzypce o moich poszukiwaniach. Nie musisz wyzwalać żadnych wydarzeń. Być może przyda się też komuś innemu ... :)

— Timo

mimo że powyższe prace kodowych, to dzieje się tylko once.I znaczy gdybym ponownie kliknij menu, w którym jest zamocowany wybrany plugin nie bierze się wartość, która jest wewnątrz val () Dlaczego to może być prawda.

— Dimitris Papageorgiou

9

Wiem, że to stary post - ale prostszy sposób aktualizacji to tylko jeden ciąg: $('select').val(2).trigger("chosen:updated");

— Andrew Newby

10

@Lucas Welper: również powinieneś zmienić $('select').val(2);na $('select').val(2).change();, ponieważ zmiana wybranej opcji select z jQuery nie wywołuje zdarzenia zmiany i niektórzy ludzie mogą tego potrzebować.

— machineaddict

41

Moja odpowiedź jest spóźniona, ale chcę dodać informacje, których brakuje we wszystkich powyższych odpowiedziach.

1) Jeśli chcesz wybrać pojedynczą wartość w wybranym zaznaczeniu.

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

2) Jeśli korzystasz z wielu wybranych opcji wyboru, może być konieczne ustawienie wielu wartości jednocześnie.

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

Informacje zebrane z poniższych linków:
1) Chosen Docs
2) Chosen Github Discussion

— Aamir
źródło

Zauważ, że „22”, „25” itd. To wartości, a nie wewnętrzny kod HTML, na przykład <option value = "25">

— coś tekstowego

2

Czasami trzeba usunąć bieżące opcje, aby manipulować wybranymi opcjami.

Oto przykład, jak ustawić opcje:

<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 (w tym opcje dołączania Howto): https://jsfiddle.net/59x3m6op/1/

— Tobi G.
źródło

1

Aby uwzględnić przypadek, w którym zaznaczenie nie ma jeszcze wartości, zamiast tego zaktualizuj var selected = mySelect.val();do var selected = mySelect.val() || [];.

— ElliotSchmelliot

0

W przypadku wielokrotnego wyboru i / lub jeśli chcesz usunąć już wybrane elementy jeden po drugim, bezpośrednio w elementach listy rozwijanej, możesz użyć czegoś takiego:

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
źródło