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

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

其他回答

试试这个(当你选择选项时触发事件,不改变选项):

$("select").mouseup(function() {
    var open = $(this).data("isopen");
    if(open) {
        alert('selected');
    }
    $(this).data("isopen", !open);
});

http://jsbin.com/dowoloka/4

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

我知道这个问题现在已经很老了,但是对于仍然遇到这个问题的人来说,我已经通过向我的选项标记添加onInput事件来实现了这一点,然后在被调用的函数中,检索该选项输入的值。

<选择id='dropdown' on输入='myFunction()'> <选项value = " 1 " > < /选项> <选项value = " 2 " > < /选项> 选择< - > < p >输出:< / p > <跨越id =“输出”> < /跨越> <类型=“短信/ javascript脚本”> 我的功能() var optionValue =文档。getElementById(“dropdown”)。 文件输出getElementById(“”)。内html =选择值; 的 剧本< - >

几个月前我做设计的时候也遇到了同样的问题。我发现的解决方案是在你正在使用的元素上使用.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()

请注意,IE上的OPTION标签不支持事件处理程序,我想出了这个解决方案,尝试一下,给我你的反馈:

<script>
var flag = true;
function resetIndex(selObj) {
    if(flag) selObj.selectedIndex = -1;
    flag = true;
}
function doSomething(selObj) {
    alert(selObj.value)
    flag = false;
}
</script>
<select onchange="doSomething(this)" onclick="resetIndex(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

我在这里所做的实际上是重置选择索引,这样onchange事件就会一直被触发,当你点击时,我们会失去所选的项目,如果你的列表很长,这可能会很烦人,但它可能在某种程度上帮助你。