jqueryjquery-chosen

Chosen' Select's first option doesn't fire 'change' event

I'm using Chosen' Select.

<select class="chosen-select form-control" id="field_options" name="options">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

$('#field_options').change(function() {
  console.log('Option changed');
});

If I select the second or third option, the event 'change' is fired. But it doesn't happen whit the first option.

Solution

  • I would consider changing your HTML. See the following.

    <select class="chosen-select form-control" id="field_options" name="options">
  <option></option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

    Now the User must change to one of the other Options which will invoke a change event.