我有一个输入表单,它允许我从多个选项中进行选择,并在用户更改选择时执行一些操作。例如,

<select onChange="javascript:doSomething();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

现在,doSomething()只在选择改变时被触发。

我想在用户选择任何选项时触发doSomething(),可能是相同的选项。

我已经尝试使用“onClick”处理程序,但在用户开始选择过程之前被触发。

那么,是否有一种方法在用户每次选择时触发一个函数?

更新:

Darryl提出的答案似乎有效,但并不总是有效。有时,当用户单击下拉菜单时,甚至在用户完成选择过程之前,事件就会被触发!


当前回答

只是一个想法,但有可能把每个<option>元素的onclick ?

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

另一种选择是在选择上使用onblur。这将在用户单击离开选择时触发。此时,您可以确定选择了什么选项。为了在正确的时间触发,选项的onclick可以模糊字段(在jQuery中使其他东西活跃或只是.blur())。

其他回答

使用jquery:

<select class="target">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script>
    $('.target').change(function() { doSomething(); });
</script>

非常老的问题,但现在点击事件工作得很好,也就是说,即使用户重新选择相同的选项,它也会触发。

测试自己:

const e = document.getElementById('myOptions') e.addEventListener('click', () => { const text = e.options[e.selectedIndex].text; console.log(文本) }) <选择id = " myOptions " > <选项> < /选项> <选项> < / B >选项 <选项> C > < /选项 < /选择>

这是我的解,和这里的解完全不同。它使用鼠标位置来确定是否单击了某个选项,而不是单击选择框打开下拉菜单。它利用事件。屏幕y位置,因为这是唯一可靠的跨浏览器变量。必须首先附加悬停事件,以便在单击事件之前计算出控件相对于屏幕的位置。

var select = $("select");

var screenDif = 0;
select.bind("hover", function (e) {
    screenDif = e.screenY - e.clientY;
});
select.bind("click", function (e) {
    var element = $(e.target);
    var eventHorizon = screenDif + element.offset().top + element.height() - $(window).scrollTop();
    if (e.screenY > eventHorizon)
        alert("option clicked");
});

这是我的jsFiddle http://jsfiddle.net/sU7EV/4/

唯一正确的答案是不使用选择字段(如果您需要在重新选择相同的答案时执行某些操作)。

创建一个下拉菜单与传统的div,按钮,显示/隐藏菜单。链接:https://www.w3schools.com/howto/howto_js_dropdown.asp

如果能够将事件监听器添加到选项中,就可以避免这种情况。如果select元素有onSelect监听器。如果点击选择字段没有烦人地触发mousedown, mouseup,和同时点击mousedown。

只是一个想法,但有可能把每个<option>元素的onclick ?

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

另一种选择是在选择上使用onblur。这将在用户单击离开选择时触发。此时,您可以确定选择了什么选项。为了在正确的时间触发,选项的onclick可以模糊字段(在jQuery中使其他东西活跃或只是.blur())。