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

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

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

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

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

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

更新:

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


当前回答

这里有几件事要做,以确保它记住旧的值,并在再次选择相同的选项时触发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标记(在这个场景中)的奇妙之处在于它将从选项标记中获取它的值。

Try:

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

对我来说还不错。

对我有用的方法:

<select id='myID' onchange='doSomething();'>
    <option value='0' selected> Select Option </option>
    <option value='1' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > A </option>
    <option value='2' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > B </option>
</select>

这样,onchange在选项更改时调用'doSomething()',并且 当onchange事件为false时,onclick调用'doSomething()',换句话说,当你选择相同的选项时

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

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

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

这里有几件事要做,以确保它记住旧的值,并在再次选择相同的选项时触发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);
    }
});