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

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

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

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

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

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

更新:

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


当前回答

添加一个额外的选项作为第一个,就像一个列的标题,这将是下拉按钮的默认值,然后单击它并在doSomething()的末尾重置,因此当选择a /B/C时,onchange事件总是触发,当选择为State时,什么都不做并返回。正如很多人之前提到的,Onclick非常不稳定。所以我们所需要做的就是做一个初始的按钮标签,这是不同于你的真正的选项,所以onchange将工作在任何选项。

<select id="btnState" onchange="doSomething(this)">
  <option value="State" selected="selected">State</option>  
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


function doSomething(obj)
{
    var btnValue = obj.options[obj.selectedIndex].value;

    if (btnValue == "State")
    {
      //do nothing
      return;
    }

    // Do your thing here

    // reset 
    obj.selectedIndex = 0;
}

其他回答

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

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

<select

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

添加一个额外的选项作为第一个,就像一个列的标题,这将是下拉按钮的默认值,然后单击它并在doSomething()的末尾重置,因此当选择a /B/C时,onchange事件总是触发,当选择为State时,什么都不做并返回。正如很多人之前提到的,Onclick非常不稳定。所以我们所需要做的就是做一个初始的按钮标签,这是不同于你的真正的选项,所以onchange将工作在任何选项。

<select id="btnState" onchange="doSomething(this)">
  <option value="State" selected="selected">State</option>  
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


function doSomething(obj)
{
    var btnValue = obj.options[obj.selectedIndex].value;

    if (btnValue == "State")
    {
      //do nothing
      return;
    }

    // Do your thing here

    // reset 
    obj.selectedIndex = 0;
}

非常老的问题,但现在点击事件工作得很好,也就是说,即使用户重新选择相同的选项,它也会触发。

测试自己:

const e = document.getElementById('myOptions') e.addEventListener('click', () => { const text = e.options[e.selectedIndex].text; console.log(文本) }) <选择id = " myOptions " > <选项> < /选项> <选项> < / B >选项 <选项> C > < /选项 < /选择>

对我有用的方法:

<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()',换句话说,当你选择相同的选项时