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

**ASP.Net Webforms**: I came across this question when my app seemed to have this problem but it turned out to be a Javascript error caused by ASP WebForm Validators. See this [jQuery-UI ticket](http://bugs.jqueryui.com/ticket/4071#comment:9) — sparebytes, Sep 30 '13 at 14:16

Adam Merrifield · Accepted Answer · 2014-08-19T15:12:36.490

9

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

edited Aug 19 '14 at 15:12

answered Jun 23 '12 at 01:15

Adam Merrifield

10,307
4
41
58

There's still the `foo` -> `reset` -> `foo` which won't trigger the last `foo`, but I should be able to figure that on my own now. – Fabrício Matté Jun 23 '12 at 01:22
@FabrícioMatté what is the function `.chosen`? – Adam Merrifield Jun 23 '12 at 01:26
`.chosen` is the Chosen plugin itself which transform the select into a `chosen` select, dw it's probably a bug in their code as usual. =] – Fabrício Matté Jun 23 '12 at 01:27
1

I've solved it, a little ugly solution but yeah, for future people who may come across the same issue: `$('#chosen_chzn').remove(); $('#chosen').val('').change().removeClass('chzn-done').chosen();` [**Fiddle**](http://jsfiddle.net/ult_combo/y6BCP/2/). – Fabrício Matté Jun 23 '12 at 02:28
3

`#chosen` is the ID of the `select` in the code above, so a more appropriate solution: `var selId = 'chosen'; $('#'+selId+'_chzn').remove(); $('#'+selId).val('').change().removeClass('chzn-done').chosen();` - [**Fiddle**](http://jsfiddle.net/ult_combo/y6BCP/3/) - and a final note, Chosen is the worst plugin in terms of adding new functionality I've ever seen. – Fabrício Matté Jun 23 '12 at 02:37

score 5 · Answer 2 · edited Mar 06 '17 at 20:12

5

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.

edited Mar 06 '17 at 20:12

Hemerson Varela

24,034
16
68
69

answered Aug 28 '12 at 20:24

Tyler

1,377
1
11
18

3

Actually, I think I've found yet another "better" solution. Not too sure. I think I just upgraded to [Select 2](http://ivaynberg.github.com/select2/) which fires the `change` event with just calling `.change()` on the original input. – Fabrício Matté Aug 28 '12 at 20:26
1

+1 though for those who are stuck with Chosen, I don't fully remember the reasoning behind removing the `chzn-done` class but I'm quite sure it was because `chzn-done` applies `display:none` to `select` elements which you've called `.chosen()` on, and calling the `.chosen()` on elements with that class wouldn't work. – Fabrício Matté Aug 28 '12 at 20:30
1

I believe if you don't remove chzn-done then calling chosen() does nothing - it believes it has already set itself up. Sort of a poor mans guard. – Andy Nov 14 '12 at 03:00

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

JSFiddle

2 Answers2

Linked