Зміна вибору у вибраному плагіном Chosen

105

Я намагаюся змінити вибраний на даний момент варіант у вибраному за допомогою плагіна Chosen.

У документації охоплює оновлення списку, і викликає подія , коли обраний варіант, але нічого (що я можу бачити) на зовнішньому зміна цього значення.

Я створив jsFiddle для демонстрації коду та моїх спроб змінити вибір:

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

— гак
джерело

Я не міг запустити демонстрацію jsfiddle, яку ви надали. ви можете, будь ласка, оновити його.

— Вдалий

Добре. Причиною я не міг запустити вашу демонстрацію - обрана бібліотека вказувала на неправильний URL. Ось оновлений jsfiddle

— Lucky

214

З розділу "Оновлення вибраного динамічно" в документах : Вам потрібно запустити на полі подію "обраний: оновлений".

$(document).ready(function() {

    $('select').chosen();

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

});

ПРИМІТКА: версії до 1.0 використовували наступне:

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

— Лукас Велпер
джерело

6

FYI: вони оновили до 1,0, яка зараз використовує chosen:updatedзамістьliszt:updated

— Henesnarfel

Я спіткнувся тут, коли намагався знайти спосіб вибрати найкращий на даний момент варіант зі списку результатів пошуку, який ви вибрали кілька разів (кожного разу, коли було втрачено фокус). Ось короткий загадку про мої дослідження. Вам не потрібно запускати будь-які події. Можливо, це корисне і для когось іншого ... :)

— Тимо,

незважаючи на те, що наведений вище код працює, це відбувається лише один раз. Я маю на увазі, якщо я знову натискаю меню, де додається вибраний плагін, не приймає значення, яке знаходиться у val (). Чому це може статися

— Dimitris Papageorgiou

9

Я знаю, що це стара публікація, але простіший спосіб оновлення - це лише в одній рядку: $('select').val(2).trigger("chosen:updated");

— Ендрю Ньюбі

10

@Lucas Welper: ви повинні також змінити $('select').val(2);в $('select').val(2).change();, тому що зміна обраної опції в добірне з JQuery не викликає подія зміни , і деякі люди , можливо , знадобиться.

— машинний вирок

41

Моя відповідь запізнюється, але я хочу додати інформацію, яка пропущена у всіх вищезазначених відповідях.

1) Якщо ви хочете вибрати одне значення у вибраному виді.

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

2) Якщо ви використовуєте декілька вибраних значень вибору, то, можливо, вам потрібно буде встановити кілька значень одночасно.

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

Інформація, зібрана за наступними посиланнями:
1) Вибрані документи
2) Вибране обговорення Гітуба

— Аамір
джерело

Зазначаючи, що "22", "25" і т.

— Д.

2

Іноді вам доведеться видалити поточні параметри, щоб маніпулювати вибраними параметрами.

Ось приклад встановлення параметрів:

<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 (включаючи способи додавання): https://jsfiddle.net/59x3m6op/1/

— Тобі Г.
джерело

1

Для обліку для випадку , коли вибір не має значення ще, оновлення , var selected = mySelect.val();щоб var selected = mySelect.val() || [];замість цього.

— ElliotSchmelliot

0

У разі декількох типів вибору та / або якщо ви хочете видалити вже вибрані елементи один за одним, безпосередньо в елементах випадаючого списку, ви можете використовувати щось на зразок:

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

— СлавішаПеткович
джерело