jQuery выбран не запускает событие onchange при изменении значения через JS

JSFiddle

я создал select С 3 options (1 пробел) в скрипке. Когда я переключаюсь с foo до bar вручную change пожары слушатель обычно.

теперь, если я сброшу select через JS с код размещен в некоторых ответах здесь на change событие не срабатывает для вновь выбранной пустой опции, кроме того, если я выберу опцию, которая была выбрана перед щелчком в на onchange событие тоже не сработает.

уверен selectзначение is быть измененным с функцией выше, которую можно увидеть в этом скрипка, а select ' s onchange событие просто не огонь.

я тоже пробовал onchange, onclick, oninput событий безрезультатно. Прямо сейчас мне интересно, должен ли я использовать MutationObserver или удалить отображаемый выбранный элемент из DOM и создать еще один, но я, наверное, слишком много думаю. Любая помощь приветствуется.

также:

этот ответ мне очень помог: jQuery выбран сброс

этот ответ не помочь: как запустить событие onchange в выбранном окне выбора прототипа javascript?

код для дальнейшего использования, если jsfiddle.net снято:

HTML-код

<div id="wrapper">
    <select id="chosen">
        <option value="!!EMPTY VALUE!!"></option>
        <option value="foo">foo</option>
        <option value="bar">bar</option>
    </select>
</div>
<br>
<button id="reset">Reset</button>

JS

$(function() {
    $('#chosen').chosen();

    $('#wrapper').on('change', '#chosen', function() {
        console.log('onchange: ' + this.value);
    });

    $('#reset').click(function() {
        $("#chosen").val('').trigger("liszt:updated"); //doesn't work
        //$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated"); //doesn't work either
        console.log('reset: ' + $('option:selected').val());
    });
});
9
javascript jquery jquery-chosen

2 ответов

вам нужно вызвать изменение после изменения значения с помощью $(selector).trigger("change")

$('#reset').click(function() {
        $("#chosen").val('').trigger("change"); //doesn't work
        //$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated");
        console.log('reset: ' + $('option:selected').val());
    });
9

копирование ответа из комментариев Фабрисио Матте, который работал для меня, чтобы другие не видели этот пост и не пропустили решение сначала, как я.

$('#chosen_chzn').remove();
$('#chosen').val('').change().removeClass('chzn-done').chosen();

смотрите это на его скрипке

Я изначально пытался продолжить использовать .trigger('liszt:updated') звонок вместо .change() но это не сработало. Не видел причины .removeClass('chzn-done') но это также важно и ваш выбор исчезнет.

4