HTML <select> 是否有 onSelect 事件或等效事件？

这是最简单的方法：

<select name="ab" onchange="if (this.selectedIndex) doSomething();">
    <option value="-1">--</option>
    <option value="1">option 1</option> 
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

在选择集中时，可与鼠标选择和键盘上/下键一起使用。

---

我需要完全相同的东西。这对我有用：

<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

支持这个：

当用户选择任何选项时，可能再次选择相同的选项

---

几个月前我在创建设计时遇到了同样的问题。我找到的解决方案是在您正在使用的元素上结合使用 .live("change", function()) 和 .blur()。

如果您希望它在用户单击时执行某些操作，而不是更改，只需将 change 替换为 click。

我为下拉列表分配了一个 ID selected，并使用了以下内容：

$(function () {
    $("#selected").live("change", function () {

    // do whatever you need to do

    // you want the element to lose focus immediately
    // this is key to get this working.
    $('#selected').blur();
    });
});

我看到这个没有选定的答案，所以我想我会给出我的意见。这对我来说效果很好，所以希望其他人在遇到困难时可以使用此代码。

http://api.jquery.com/live/

编辑：使用 on 选择器而不是 .live。请参阅jQuery .on()

---

只是一个想法，但是否可以在每个 <option> 元素上单击一次？

<select>
  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>
</select>

另一种选择可能是在选择上使用 onblur。这将在用户点击离开选择的任何时候触发。此时，您可以确定选择了哪个选项。为了在正确的时间触发此事件，选项的 onclick 可能会模糊该字段（使其他内容处于活动状态或只是 jQuery 中的 .blur()）。

---

onclick 方法并不完全糟糕，但如前所述，当鼠标单击未更改值时，它不会被触发。然而，可以在 onchange 事件中触发 onclick 事件。

<select onchange="{doSomething(...);if(this.options[this.selectedIndex].onclick != null){this.options[this.selectedIndex].onclick(this);}}">
    <option onclick="doSomethingElse(...);" value="A">A</option>
    <option onclick="doSomethingElse(..);" value="B">B</option>
    <option onclick="doSomethingElse(..);" value="Foo">C</option>
</select>

---

如果你真的需要它像这样工作，我会这样做（以确保它可以通过键盘和鼠标工作）

将 onfocus 事件处理程序添加到选择以设置“当前”值

将 onclick 事件处理程序添加到选择以处理鼠标更改

将 onkeypress 事件处理程序添加到 select 以处理键盘更改

不幸的是，onclick 将运行多次（例如 onpening 选择...和选择/关闭）并且 onkeypress 可能会在没有任何变化时触发...

<script>
  function setInitial(obj){
    obj._initValue = obj.value;
  }
  function doSomething(obj){
    //if you want to verify a change took place...
    if(obj._initValue == obj.value){
      //do nothing, no actual change occurred...
      //or in your case if you want to make a minor update
      doMinorUpdate();
    } else {
      //change happened
      getNewData(obj.value);
    }
  }
</script>


<select onfocus="setInitial(this);" onclick="doSomething();" onkeypress="doSomething();">
  ...
</select>

---

要在每次用户选择某些东西（即使是相同的选项）时正确触发事件，您只需要欺骗选择框。

就像其他人所说的那样，在焦点上指定一个否定的 selectedIndex 以强制更改事件。虽然这确实允许您欺骗选择框，但只要它仍然具有焦点，它就不会工作。简单的解决方法是强制选择框模糊，如下所示。

标准 JS/HTML：

<select onchange="myCallback();" onfocus="this.selectedIndex=-1;this.blur();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

jQuery插件：

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script type="text/javascript">
    $.fn.alwaysChange = function(callback) {
        return this.each(function(){
            var elem = this;
            var $this = $(this);

            $this.change(function(){
                if(callback) callback($this.val());
            }).focus(function(){
                elem.selectedIndex = -1;
                elem.blur();
            });
        });
    }


    $('select').alwaysChange(function(val){
        // Optional change event callback,
        //    shorthand for $('select').alwaysChange().change(function(){});
    });
</script>

您可以看到一个 working demo here。

---

将扩展 jitbit 的答案。当您单击下拉菜单然后单击下拉菜单而不选择任何内容时，我发现这很奇怪。最终得到了一些类似的东西：

var lastSelectedOption = null; DDChange = function(Dd) { //更改后模糊，以便在不丢失焦点的情况下再次单击//重新触发 onfocus。 dd.blur(); //剩下的就是你想要的变化。 var tcs = $("span.on_change_times"); tcs.html(+tcs.html() + 1); $("span.selected_index").html(Dd.prop("selectedIndex"));返回假； }; DDFocus = function(Dd) { lastSelectedOption = Dd.prop("selectedIndex"); dd.prop("selectedIndex", -1); $("span.selected_index").html(Dd.prop("selectedIndex"));返回假； }; //在模糊时，将其设置回他们单击//离开之前的值而不选择选项。 // //这对用户来说通常很奇怪，因为他们//可能会单击下拉菜单以查看其他选项，//意识到他们没有更改任何内容，并且//单击下拉菜单。 DDBlur = function(Dd) { if (Dd.prop("selectedIndex") === -1) Dd.prop("selectedIndex", lastSelectedOption); $("span.selected_index").html(Dd.prop("selectedIndex"));返回假； }; 1 2

选定索引：
触发onchange的时间：0

这对用户来说更有意义，并允许 JavaScript 在他们每次选择任何选项（包括较早的选项）时运行。

这种方法的缺点是它破坏了选项卡到下拉列表并使用箭头键选择值的能力。这对我来说是可以接受的，因为所有用户一直点击所有内容，直到永恒结束。

---

我知道这个问题现在已经很老了，但是对于仍然遇到这个问题的任何人，我通过在我的选项标签中添加一个 onInput 事件，然后在那个被调用的函数中检索该选项输入的值，在我自己的网站上实现了这一点。

1 2

输出：