jQuery Chosen not firing onchange event when value is changed through JS

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

Copying an answer out of the comments by Fabrício Matté that worked for me so others don't see this post and miss a solution at first like I did.

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

See this on his Fiddle

I originally tried to continue using the .trigger('liszt:updated') call instead of the .change() but that did not work. Didn't see the reasoning behind .removeClass('chzn-done') either but this is also essential or your select box will vanish.

Answer 2

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