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

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

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

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

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

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

更新:

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


当前回答

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

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

其他回答

唯一对我有效的解决方案是完全重置SELECT on“onFocus”事件。这样,SELECT总是在"onChange"事件上"changes":

$('select').on('focus', function(ev) {
    var $select = $(this);
    var options = $select.html();
    $select.empty();
    $select.append(options);
});

$('select').on('change', function(ev) {
    // Now the select element ALWAYS fires onChange
});

当元素获得焦点时改变select的值,例如(使用jquery):

$("#locationtype").focus(function() {
    $("#locationtype").val('');
});

$("#locationtype").change(function() {
    if($("#locationtype").val() == 1) {
        $(".bd #mapphp").addClass('show');
        $("#invoerform").addClass('hide');
    }
    if($("#locationtype").val() == 2) {
        $(".lat").val('');
        $(".lon").val('');
    }
});

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

试试这个:

<select id="nameSelect" onfocus="javascript:document.getElementById('nameSelect').selectedIndex=-1;" onchange="doSomething(this);">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

这可能不能直接回答你的问题,但这个问题可以通过简单的设计调整来解决。我知道这可能不是100%适用于所有用例,但我强烈建议您重新考虑您的应用程序的用户流程,以及以下设计建议是否可以实现。

我决定做一些简单的事情,而不是黑客onChange()使用其他事件的替代方案,这并不是真正意义上的目的(模糊,点击等)。

我的解决方法是:

只需预先挂起一个没有任何值的占位符选项标记,如select。

所以,不要只使用下面的结构,这需要一些hack-y替代方案:

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

考虑使用这个:

<select>
  <option selected="selected">Select...</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

因此,通过这种方式,您的代码更加简化,并且每当用户决定选择默认值以外的内容时,onChange将按预期工作。如果您不希望他们再次选择第一个选项,甚至可以将disabled属性添加到第一个选项,并强制他们从选项中选择一些内容,从而触发onChange()触发。

At the time of this answer, I'm writing a complex Vue application and I found that this design choice has simplified my code a lot. I spent hours on this problem before I settled down with this solution and I didn't have to re-write a lot of my code. However, if I went with the hacky alternatives, I would have needed to account for the edge cases, to prevent double firing of ajax requests, etc. This also doesn't mess up the default browser behaviour as a nice bonus (tested on mobile browsers as well).

有时候,你只需要退一步,从大局出发,寻找最简单的解决方案。