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

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

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

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

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

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

更新:

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


当前回答

2022香草javascript

...因为这是谷歌的热门节目。

最初的海报没有要求一个JQuery解决方案,但所有的答案只演示JQuery或内联选择标签事件。

使用'change'事件监听器。

const selectDropdown = document.querySelector('select');
selectDropdown.addEventListener('change', function (e) { /* your code */ });

... 或者调用一个单独的函数:

function yourFunc(e) { /* your code here */ }

const selectDropdown = document.querySelector('select');
selectDropdown.addEventListener('change', yourFunc);

其他回答

这是我的解,和这里的解完全不同。它使用鼠标位置来确定是否单击了某个选项,而不是单击选择框打开下拉菜单。它利用事件。屏幕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/

当遇到类似的问题时,我所做的是在选择框中添加了一个“onFocus”,该选择框附加了一个新的通用选项(“选择一个选项”或类似的东西),并默认将其作为所选选项。

我发现的最佳解决方案是在select元素的第一个元素中添加一个禁用选项,以便所有其他项目都可以响应onchange事件中的单击。

<select onchange="doSomething()">
  <option disabled selected value> -- select an option -- </option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

您应该尝试使用option:selected

$("select option:selected").click(doSomething);
<select name="test[]" 
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>