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

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

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

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

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

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

更新:

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


当前回答

<select name="test[]" 
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<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()

请注意,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事件就会一直被触发,当你点击时,我们会失去所选的项目,如果你的列表很长,这可能会很烦人,但它可能在某种程度上帮助你。

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

很久以前的事了,但在回答最初的问题时,这有帮助吗? 只要把onClick放到SELECT行。 然后在OPTION行中放入您想要每个OPTION做的事情。 即:

<SELECT name="your name" onClick>
<option value ="Kilometres" onClick="YourFunction()">Kilometres
-------
-------
</SELECT>

如果你真的需要它像这样工作,我会这样做(以确保它通过键盘和鼠标工作)

在select中添加一个onfocus事件处理程序来设置“current”值 向选择中添加onclick事件处理程序以处理鼠标更改 向select添加onkeypress事件处理程序以处理键盘更改

不幸的是,onclick将运行多次(例如,在打开选择…在选择/关闭时)和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>