Chosen plugin change event not triggering

Question

I'm using Chosen jQuery plugin and noticed that the change event is working only when the page loads, NOT every time the input field is being change.

How can I make it work every time the user changes the value of the input field?

Here is my code:

 $("#day").chosen().change({
     console.log('working');
  });

Am I missing something?

Solution 1

To fire the standard change event, use like:

  $('#day').on('change', function(e) {
    // triggers when whole value changed
    console.log("value changed");
  });

To fire the event on each key press,

  $('#day').on('keyup', function(e) {
    // triggers when each key pressed
    console.log("key pressed");
  });

To know about the default events of chosen, refer here.

Solution 2

Try this:

$(document).ready(function(){
    $("selector").chosen().change(function(){
        var id = $(this).val();
    });
})

Solution 3

Updating Chosen Dynamically

If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

$("#foo").trigger("chosen:updated");

Solution 4

chosen multiple

When chosen multiple is set, $(this).val(); returns an array. The following code will return the last id [un]selected:

$('#my_chosen_list').chosen().change(function(_, object){
    console.log(!object.selected ? object.selected : object.deselected);
    ...
});

tip: undefined is undefined (...), but !undefined is true, so !!undefined is false

View more solutions