Question

JSFiddle

I’ve set up a select with 3 options (1 blank) in the fiddle. When I switch from foo to bar manually, the change listener fires normally.

Now if I reset the select through JS with the code posted in some answers here, the change event does not fire for the newly selected blank option, furthermore, if I select the option which was selected before clicking in the reset button the onchange event won’t fire either.

I’m sure the select‘s value is being changed with the function above, which can be seen in this fiddle, but the select‘s onchange event simply doesn’t fire.

I’ve also tried onchange, onclick, oninput events to no avail. Right now I’m wondering if I should use a MutationObserver or remove the rendered chosen element from the DOM and create another, but I’m probably overthinking it. Any help is appreciated.

Also:

This answer helped me a lot: jQuery Chosen reset

This answer didn’t help: how to fire onchange event in chosen prototype javascript select box?

Code for future reference if jsfiddle.net is taken down:

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

Answer 1

You need to trigger the change after you change the value with $(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());
    });