选择'选择的第一个选项不会触发'更改'事件答案

【问题标题】：Chosen' Select's first option doesn't fire 'change' event选择'选择的第一个选项不会触发'更改'事件
【发布时间】：2020-02-12 17:41:44
【问题描述】：

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

如果我选择第二个或第三个选项，则会触发“更改”事件。但它不会发生在第一个选项中。

【问题讨论】：

当您从选项 2 -> 选项 1 开始时它会被触发吗？从选项 1 开始 -> 选项 1 没有变化
作为“选项 1”的默认选项，它已被选中，因此不会触发 change 事件。考虑先添加一个空白选项。否则使用$("#field_options option").mouseup() 事件。
补充@Twisty 所说的内容-如果您希望此事件在加载时触发，则在加载时触发：$("#field_options).change(...).trigger("change");
@danronmoon 不，它没有:(
@Twisty 空白选项解决方案完美运行。你应该回答，这样我就可以标记它。非常感谢！

标签： jquery jquery-chosen

【解决方案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 事件的其他选项之一。

【讨论】：

【解决方案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，它现在也会触发更改事件。

【讨论】：