9

动机：

我想select从 AJAX 调用中动态加载带有值的 a，并允许用户在加载后选择列表中的第一项，并且在获得焦点后，现在，第一项是选定项，当您单击下拉并单击第一项没有任何反应。我无法添加任何无效选择的占位符项目。

问题：

.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不是解决方案，直到有人点击其他地方才会发生，这在游戏中为时已晚。

4

5 回答 5

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

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

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

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

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

于 2013-05-13T02:34:55.590 回答
1

您可以使用 click 事件或 focusout。如果用户仅使用 tab + enter 之类的键盘，则单击事件将不起作用，但焦点输出将起作用。

编辑：

添加了一个演示： 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 次点击，当您打开选择时单击一次，然后在选择一项时单击。

于 2013-05-13T01:18:02.883 回答
0

我发现的最好方法是使用选项点击事件

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

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

于 2016-06-02T17:52:31.577 回答
-1

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

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

这样您就可以change在具有 id 的元素上触发事件yourelementid

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

$("#yourelementid").on('click', function() {
    $(this).trigger('change');
});
于 2013-05-13T01:16:51.490 回答
-1

尝试这个：

$(document).ready(function(){

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

    // And now fire change event when the DOM is ready
    $('#myoptions').trigger('change');
});
于 2013-05-13T01:18:13.270 回答