Question

我有一个输入表单，让我可以从多个选项中选择，并在用户更改选择时执行某些操作。例如，

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

现在，只有在选择改变时才会触发doSomething()。

当用户选择任何选项时（可能是相同的选项），我想触发doSomething（）。

我尝试使用“onClick”处理程序，但这在用户开始选择过程之前就被触发了。

那么，有没有一种方法可以在用户每次选择时触发一个函数？

更新：

Darryl提供的答案似乎有效，但并不始终有效。有时，事件会在用户点击下拉菜单之前立即触发，甚至在用户完成选择过程之前！

Answer 1

我需要完全相同的东西。这正是对我有用的：

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

支持这个：

当用户选择任何选项时，可能是同一个选项。

Answer 2

这是最简单的方式：

<select name="ab" onchange="if (this.selectedIndex) doSomething();">
    <option value="-1">--</option>
    <option value="1">option 1</option> 
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

当选择被聚焦时，可以使用鼠标选择和键盘上/下箭头一起使用。

Answer 3

几个月前我创建设计时也有同样的问题。我找到的解决方法是在使用的元素上与.blur()结合使用.live("change", function())。

如果您希望在用户单击而不是更改时执行某些操作，请将change替换为click。

我给下拉菜单分配了一个ID，selected，并使用了以下内容：

$(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/ http://api.jquery.com/live/

编辑：使用on选择器而不是.live。请参见jQuery .on()。

Answer 4

只是一个想法，但每个 <option> 元素上是否可以放置一个 onclick 呢？

<select>
  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>
</select>

另一种选择是在选择器上使用onblur。这会在用户单击选择器以外的任何地方时触发。此时，您可以确定选择了哪个选项。为了使此事件在正确的时间触发，选项的onclick应该使字段模糊（使其他内容处于活动状态或仅使用jQuery中的 .blur()）。

Answer 5

如果你真的需要它像这样工作，我会这样做（确保它可以通过键盘和鼠标工作）。

Add an onfocus event handler to the select to set the "current" value
Add an onclick event handler to the select to handle mouse changes
Add an onkeypress event handler to the select to handle keyboard changes

很不幸，onClick 会运行多次（例如在选择时打开...和选择/关闭时），而 onKeyPress 可能在没有更改时触发...

<script>
  function setInitial(obj){
    obj._initValue = obj.value;
  }
  function doSomething(obj){
    //if you want to verify a change took place...
    if(obj._initValue == obj.value){
      //do nothing, no actual change occurred...
      //or in your case if you want to make a minor update
      doMinorUpdate();
    } else {
      //change happened
      getNewData(obj.value);
    }
  }
</script>


<select onfocus="setInitial(this);" onclick="doSomething();" onkeypress="doSomething();">
  ...
</select>

Answer 6

The onclick approach is not entirely bad but as said, it will not be triggered when the value isn t changed by a mouse-click.
It is however possible to trigger the onclick event in the onchange event.

<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>

Answer 7

我知道这个问题现在已经很旧了，但对于任何仍然遇到这个问题的人，我通过在我的网站上添加onInput事件到我的选择标签来实现了这一点，然后在调用该函数时，检索该选项输入的值。

<select id= dropdown  onInput= myFunction() >
  <option value= 1 >1</option>
  <option value= 2 >2</option>
</select>

<p>Output: </p> 
<span id= output ></span>

<script type= text/javascript >
function myFunction() {
 var optionValue = document.getElementById("dropdown").value;
 document.getElementById("output").innerHTML = optionValue;
}
</script>

Answer 8

要进一步说明Jitbit的答案。我发现当你点击下拉菜单然后没有选择任何内容就离开下拉菜单时，这很奇怪。最终结果大致如下：

var lastSelectedOption = null;

DDChange = function(Dd) {
  //Blur after change so that clicking again without 
  //losing focus re-triggers onfocus.
  Dd.blur();

  //The rest is whatever you want in the change.
  var tcs = $("span.on_change_times");
  tcs.html(+tcs.html() + 1);
  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

DDFocus = function(Dd) {
  lastSelectedOption = Dd.prop("selectedIndex");
  Dd.prop("selectedIndex", -1);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

//On blur, set it back to the value before they clicked 
//away without selecting an option.
//
//This is what is typically weird for the user since they 
//might click on the dropdown to look at other options,
//realize they didn t what to change anything, and 
//click off the dropdown.
DDBlur = function(Dd) {
  if (Dd.prop("selectedIndex") === -1)
    Dd.prop("selectedIndex", lastSelectedOption);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="Dd" onchange="DDChange($(this));" onfocus="DDFocus($(this));" onblur="DDBlur($(this));">
  <option>1</option>
  <option>2</option>
</select>
<br/>
<br/>Selected index: <span class="selected_index"></span>
<br/>Times onchange triggered: <span class="on_change_times">0</span>

这对用户来说更加合理，并允许JavaScript在他们选择任何选项（包括早期选项）时运行。

这种方法的缺点是它会破坏选项卡到一个下拉列表并使用箭头键选择值的能力。这对我来说是可以接受的，因为所有用户都会一直点击所有东西，直到永恒的尽头。

Answer 9

为了在用户每次选择某个选项时（即使是相同的选项）正确触发事件，您只需要诱导选择框。

就像其他人所说，聚焦时指定负的selectedIndex以强制更改事件。虽然这确实让您欺骗选择框，但只要它仍然聚焦，它就不起作用。简单的解决方法是强制选择框模糊，如下所示。

Standard JS/HTML:

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

jQuery Plugin:

<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>

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

Answer 10

首先，您使用onChange作为事件处理程序，然后使用标志变量，以便在每次更改时执行所需的函数。

<select

var list = document.getElementById("list");
var flag = true ; 
list.onchange = function () {
if(flag){
document.bgColor ="red";
flag = false;

}else{
document.bgColor ="green";
flag = true;
}
}

<select id="list"> 
<option>op1</option>
<option>op2</option>
<option>op3</option>
</select>

Answer 11

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

我决定做一些简单的事情，而不是使用其他并非真正用于此目的的事件（例如blur，click等）来替换onChange()。

我解决方法是：

只需在前面添加一个没有值的占位符选项标签，如