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

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

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

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

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

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

更新:

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


当前回答

首先,你使用onChange作为事件处理程序,然后使用标志变量,使它做你想要的功能,每次你做一个改变

<select

var list = document.getElementById("list"); Var标志= true; 列表。Onchange = function () { 如果(国旗){ 文档。背景=“红色”; Flag = false; 其他}{ 文档。背景=“绿色”; Flag = true; } } <选择id = "列表" > <选项> op1 > < /选项 <选项> op2 > < /选项 <选项> op3 > < /选项 < /选择>

其他回答

首先,你使用onChange作为事件处理程序,然后使用标志变量,使它做你想要的功能,每次你做一个改变

<select

var list = document.getElementById("list"); Var标志= true; 列表。Onchange = function () { 如果(国旗){ 文档。背景=“红色”; Flag = false; 其他}{ 文档。背景=“绿色”; Flag = true; } } <选择id = "列表" > <选项> op1 > < /选项 <选项> op2 > < /选项 <选项> op3 > < /选项 < /选择>

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

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

这里有几件事要做,以确保它记住旧的值,并在再次选择相同的选项时触发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 name="test[]" 
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>