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

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

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

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

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

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

更新:

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


当前回答

你可以使用onChange: http://www.w3schools.com/TAGS/tag_Select.asp

摘自http://www.faqs.org/docs/htmltut/forms/_SELECT_onChange.html onChange指定当用户选择其中一个选项时要运行的JavaScript。这意味着当用户选择一个项目时,操作将立即启动,而不是当按下“提交”按钮时。

其他回答

实际上,当用户使用键盘更改选择控件中的选择时,onclick事件不会触发。您可能必须使用onChange和onClick的组合来获得您正在寻找的行为。

onclick方法并不是完全糟糕,但正如前面所说,当没有通过鼠标单击更改值时,它不会被触发。 但是可以在onchange事件中触发onclick事件。

<select onchange="{doSomething(...);if(this.options[this.selectedIndex].onclick != null){this.options[this.selectedIndex].onclick(this);}}">
    <option onclick="doSomethingElse(...);" value="A">A</option>
    <option onclick="doSomethingElse(..);" value="B">B</option>
    <option onclick="doSomethingElse(..);" value="Foo">C</option>
</select>
<select name="test[]" 
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

关于select标记(在这个场景中)的奇妙之处在于它将从选项标记中获取它的值。

Try:

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

对我来说还不错。

为了在用户每次选择某个东西(甚至是相同的选项)时正确地触发一个事件,您只需要欺骗选择框。

如其他人所说,在focus上指定一个负selectedIndex来强制更改事件。虽然这确实允许你欺骗选择框,但只要它仍然有焦点,它就不会起作用。简单的解决方法是强制选择框模糊,如下所示。

JS / HTML标准:

<select onchange="myCallback();" onfocus="this.selectedIndex=-1;this.blur();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

jQuery插件:

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

<script type="text/javascript">
    $.fn.alwaysChange = function(callback) {
        return this.each(function(){
            var elem = this;
            var $this = $(this);

            $this.change(function(){
                if(callback) callback($this.val());
            }).focus(function(){
                elem.selectedIndex = -1;
                elem.blur();
            });
        });
    }


    $('select').alwaysChange(function(val){
        // Optional change event callback,
        //    shorthand for $('select').alwaysChange().change(function(){});
    });
</script>

你可以在这里看到一个工作演示。