如果选择的选项是下拉列表中已选择的选项,如何接收事件？

Question

动机:

我想动态加载一个select带有来自AJAX调用的值,并允许用户在加载后选择列表中的第一个项目,并在它获得焦点后,现在,第一个项目是所选项目,当您单击时下拉并单击第一项没有任何反应.我无法添加任何无效选择的占位符项.

题:

.change当重新选择/不更改当前选择的选项时,如何在jQuery中触发事件？

鉴于以下内容:

<select id="myoptions">
  <option id="one" >Option 1</option>
  <option id="two">Option 2</option>
</select>

假设选择了该选项one,我点击下拉列表并再次选择 one,会触发什么事件？

$('#myoptions').change(function() {
    alert('You selected something!');
}

如果我选择不同的东西,上面的代码可以工作,但如果我选择当前选择的选项没有任何反应.

换一种说法 :

如果我点击下拉列表并"选择"当前选择的选项,我该如何才能触发事件？

没有答案:

所有这些有关的建议trigger都没有解决方案,我需要的东西触发,当我点击上Option 1 使用鼠标时,Option 1已经是所选的选项.

我尝试过使用.click,然后也没有任何反应.

这些答案都不是第一次选择下拉列表的用例的有效解决方案,并且有人选择默认的选定选项.什么都没发生.

focusout 不是解决方案,直到有人点击其他地方才会发生这种情况,这在游戏中已经太晚了.

Answer 1

工作解决方案：

首先，您必须显式地将第一项设置为状态selected。

<select id="myoptions">
  <option id="one" selected="selected">Option 1</option>
  <option id="two">Option 2</option>
</select>

然后，您必须在 JavaScript 中显式删除该selected属性。

$('#myoptions option:selected').removeAttr('selected');

$("#myoptions").on("change", function(){
    console.debug($('#myoptions').find('option:selected').val());
});

然后，这将在初始化时显示一个空白/空下拉框。这将允许您在第一次单击下拉列表时选择列表中的第一项，因为没有option该selected属性了。

这样做的好处是具有空白占位符选择的外观，而实际上不必拥有一个占位符并编写所有复杂的逻辑来在选择它时进行处理。

CodePen 解决方案的工作示例。 请确保在单击链接之前打开 JavaScript 调试控制台，否则您将看不到所需的效果。

这仍然没有解决很多其他人询问的类似问题的重选问题，我想将其用作刷新机制，但我将在另一个问题中解决这个问题。