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

Question

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.

Answer 1

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.

Answer 2

If you don't want to start your dropdown with a blank element or something like "Choose your option", you should be able to do something like this, at least this works for regular select dropdown menus.

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

The first option will be selected by default, but also hidden. So if you select Option 1 in the dropdown menu, it will now trigger a change event, too.