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

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

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

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

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

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

更新:

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


当前回答

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

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

其他回答

这是最简单的方法:

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

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

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

因此,我的目标是能够多次选择相同的值,这基本上覆盖onchange()函数,并将其转化为有用的onclick()方法。

基于上面的建议,我想出了这个适合我的方法。

<select name="ab" id="hi" onchange="if (typeof(this.selectedIndex) != undefined) {alert($('#hi').val()); this.blur();}" onfocus="this.selectedIndex = -1;">
    <option value="-1">--</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

http://jsfiddle.net/dR9tH/19/

这里有几件事要做,以确保它记住旧的值,并在再次选择相同的选项时触发onchange事件。

首先你需要一个常规的onChange事件:

$("#selectbox").on("change", function(){
    console.log($(this).val());
    doSomething();
});

要想在再次选择相同的选项时触发onChange事件,可以在下拉菜单接收焦点时通过将其设置为无效值来取消设置所选选项。但你也想存储之前选择的值,以便在用户没有选择任何新选项的情况下恢复它:

prev_select_option = ""; //some kind of global var

$("#selectbox").on("focus", function(){
    prev_select_option = $(this).val(); //store currently selected value
    $(this).val("unknown"); //set to an invalid value
});

上面的代码将允许您触发onchange,即使选择了相同的值。但是,如果用户在选择框外单击,则希望恢复以前的值。我们在onBlur上做:

$("#selectbox").on("blur", function(){
    if ($(this).val() == null) { 
       //because we previously set an invalid value 
       //and user did not select any option
        $(this).val(prev_select_option);
    }
});

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

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