Изменение выбора в выборе с помощью плагина Chosen - PullRequest
Новая
       18

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

92 голосов
/ 24 января 2012

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

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

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

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

Ответы [ 4 ]

199 голосов
/ 24 января 2012

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

$(document).ready(function() {

    $('select').chosen();

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

});

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

$('select').trigger("liszt:updated");
31 голосов
/ 21 февраля 2016

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

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

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

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

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

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

1 голос
/ 03 декабря 2016

Иногда вам необходимо удалить текущие параметры, чтобы манипулировать выбранными параметрами.

Вот пример того, как установить параметры: 

<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/tbaf0r38/30/

0 голосов
/ 05 марта 2019

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

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