Chosen' Select 的第一个选项不会触发 'change' 事件

Question

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

如果我 select 第二个或第三个选项，事件 'change' 被触发。但这不会发生在第一个选项中。

Answer 1

我会考虑改变你的 HTML。见下文。

<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>

现在，用户必须更改为将调用 change 事件的其他选项之一。

Answer 2

如果您不想以空白元素或类似“选择您的选项”之类的元素开始下拉菜单，您应该可以这样做，至少这适用于常规 select 下拉菜单菜单。

<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>

第一个选项将默认 selected，但也会隐藏。因此，如果您 select 下拉菜单中的选项 1，它现在也会触发更改事件。

Chosen' Select 的第一个选项不会触发 'change' 事件

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

jquery

jquery-chosen