选择的“选择”的第一个选项不会触发“更改”事件

Question

我正在使用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');
});

如果我选择第二个或第三个选项，则会触发事件 '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 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>

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