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

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

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

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

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

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

更新:

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


当前回答

这是最简单的方法:

<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>

工作与鼠标选择和键盘上/下键时,选择是集中。

其他回答

几个月前我做设计的时候也遇到了同样的问题。我发现的解决方案是在你正在使用的元素上使用.live("change", function())结合.blur()。

如果你想让它在用户点击时做一些事情,而不是改变,只需用点击替换改变。

我为我的下拉菜单分配了一个ID,选择并使用如下:

$(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()

这是最简单的方法:

<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>

工作与鼠标选择和键盘上/下键时,选择是集中。

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

测试自己:

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

我曾经遇到过类似的需求,最终为同样的-写了一个angularjs指令

Guthub链接-角选择

使用元素[0].blur ();将焦点从选择标记上移除。逻辑是触发这种模糊的第二次点击下拉菜单。

即使用户在下拉菜单中选择了相同的值,也会触发As-select。

DEMO - link

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

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