Изменение выделения в выделении с помощью плагина Chosen

105

Я пытаюсь изменить текущий выбранный параметр в выборе с помощью плагина Chosen.

В документации описывается обновление списка и запуск события при выборе параметра, но ничего (что я могу видеть) при внешнем изменении текущего выбранного значения.

Я сделал jsFiddle, чтобы продемонстрировать код и мои попытки изменить выбор:

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

— гак
источник

Я не смог запустить предоставленную вами демонстрацию jsfiddle. не могли бы вы обновить его.

— Lucky

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

— Lucky

214

Из раздела «Обновление выбранного динамически» в документации : вам необходимо активировать событие 'selected: updated' в поле

$(document).ready(function() {

    $('select').chosen();

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

});

ПРИМЕЧАНИЕ: в версиях до 1.0 использовалось следующее:

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

— Лукас Велпер
источник

6

К вашему сведению: они обновились до 1.0, который теперь использует chosen:updatedвместоliszt:updated

— Henesnarfel

Я наткнулся здесь, когда пытался найти способ выбрать наиболее подходящий в настоящее время вариант из списка результатов поиска с множественным выбором (всякий раз, когда фокус был потерян). Вот небольшая скрипка о моих исследованиях. Вам не нужно событие запускать какие-либо события. Возможно, это пригодится и кому-то другому ... :)

— Timo

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

— Димитрис Папагеоргиу

9

Я знаю, что это старый пост, но более простой способ обновления - всего одна строка: $('select').val(2).trigger("chosen:updated");

— Эндрю Ньюби,

10

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

— machineaddict

41

Мой ответ запоздал, но я хочу добавить некоторую информацию, которая отсутствует во всех приведенных выше ответах.

1) Если вы хотите выбрать одно значение в выбранном списке.

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

2) Если вы используете несколько выбранных вариантов выбора, возможно, вам придется установить несколько значений одновременно.

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

Информация собрана по следующим ссылкам:
1) Избранные документы
2) Избранные обсуждения Github

— Аамир
источник

Отмечая, что «22», «25» и т. Д. Являются значениями, а не внутренним HTML, например, <option value = "25"> sometext </option>

— Фади Бакура

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

Чтобы учесть случай, когда у select еще нет значения, обновите его 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');
});

— Славиша Петкович
источник