动机：

Question

动机：

我希望使用来自AJAX调用的值动态加载select，并允许用户在加载后选择列表中的第一项 < / em>它获得焦点，现在，第一项是选择项目，当您单击下拉列表并单击第一项时没有任何反应。我无法添加任何无效选择的占位符项。

问题：

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

鉴于以下内容：

<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 点击时使用鼠标 <{strong> 1}}已经是选定的选项。

我尝试使用Option 1，然后没有任何事情发生。

对于第一次的用例，没有一个答案是选择下拉列表的工作解决方案，而某人选择默认选择的选项。没有任何事情发生。

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

Answer 1

您可以使用点击事件或焦点。如果用户仅使用tab + enter等键盘但是focusout可以正常工作，则Click事件将无效。

修改

添加了演示：http://jsfiddle.net/fPRe7/ 即使您单击所选项目，单击也可以。

$("#myoptions").on("click", function(){ console.debug("click"); }); $("#myoptions").on("change", function(){ console.debug("changed"); }); $("#myoptions").on("focusout", function(){ console.debug("focusout"); });

Chrome只会获得1次点击（选择一次），但FF会获得2次点击，当您打开选择时单击一次，选择其中一次时点击。

Answer 2

工作解决方案：

首先，您必须将第一项显式设置为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 working example of the solution. 确保在点击链接之前打开JavaScript调试控制台，否则您将看不到所需的效果。

这仍然无法解决重新选择问题，许多其他人已经问过哪个是类似的问题，我想将其用作刷新机制，但我会在另一个问题上解决这个问题。

Answer 3

我找到的最好方法是使用选项点击事件

$(document).on('click', 'select#myselect option', function(){
      doStuff(this.value);
});

无论先前选择什么，都会被调用。并且它不会弄乱选择控件中显示为选定选项的内容（如果使用removeAttr（'selected'）取消选择它将会发生这种情况）

Answer 4

使用.trigger()函数触发元素上的自定义事件。

$("#yourelementid").trigger('change'):

这样，您就可以在ID为change

的元素上触发yourelementid事件

现在，因为您希望在单击下拉列表并选择上一个元素时发生这种情况。添加点击事件应该这样做。

$("#yourelementid").on('click', function() {
    $(this).trigger('change');
});

Answer 5

试试这个：

$(document).ready(function(){

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

    // And now fire change event when the DOM is ready
    $('#myoptions').trigger('change');
});

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

动机：

问题：

不是答案：

5 个答案:

工作解决方案：