HTML <select>是否有onSelect事件或等效事件？

Question

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

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

现在,doSomething()只有在选择更改时才会触发.

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

我尝试过使用"onClick"处理程序,但在用户启动选择过程之前会触发该处理程序.

那么,有没有办法在用户的每次选择上触发一个功能？

更新:

达里尔建议的答案似乎有效,但它并不一致.有时,只要用户点击下拉菜单,即使在用户完成选择过程之前,事件也会被触发!

Answer 1

这是最简单的方法:

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

我需要完全一样的东西.这对我有用:

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

支持这个:

当用户选择任何选项时,可能再次选择相同的选项

Answer 3

2022 普通 JavaScript

...因为这是 Google 上的热门搜索。

原始海报没有要求 JQuery 解决方案，但所有现有答案仅演示 JQuery 或内联 SELECT 标记事件。以下是使用 Vanilla Javascript 的方法：

将事件监听器与“ change ”事件结合使用。

const selectDropdown = document.querySelector('select');
selectDropdown.addEventListener('change', function (e) { /* your code */ });

...或者调用一个单独的函数：

function yourFunc(e) { /* your code here */ }

const selectDropdown = document.querySelector('select');
selectDropdown.addEventListener('change', yourFunc);

Answer 4

几个月前我创建设计时遇到了同样的问题.我发现的解决方案是.live("change", function())与.blur()您正在使用的元素结合使用.

如果您希望在用户只需点击而不是更改时执行某些操作,只需替换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/

编辑:使用on选择器而不是.live.见jQuery .on()

Answer 5

只是一个想法,但是可以对每个<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 6

我知道这个问题现在已经很老了，但是对于仍然遇到这个问题的人来说，我已经通过在我自己的网站上通过向我的选项标记添加 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 7

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>

Answer 8

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

• 将 onfocus 事件处理程序添加到选择以设置“当前”值
• 将 onclick 事件处理程序添加到选择以处理鼠标更改
• 将 onkeypress 事件处理程序添加到选择以处理键盘更改

不幸的是，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 9

要在用户每次选择某些内容时正确触发事件（即使是相同的选项），您只需要欺骗选择框。

就像其他人所说的那样，指定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>

您可以在此处查看工作演示。

Answer 10

要扩展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 11

首先，您使用 onChange 作为事件处理程序，然后使用标志变量使其在每次进行更改时执行您想要的功能

<select

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

Answer 12

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

我决定做一些简单的黑客比替代品onChange()使用并不真正意味着用于此目的的其他事件（blur，click，等）

我解决的方法：

只需预先添加一个占位符选项标签，例如对其没有价值的 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()火灾。

在回答这个问题时，我正在编写一个复杂的 Vue 应用程序，我发现这个设计选择大大简化了我的代码。在我解决这个问题之前，我花了几个小时解决这个问题，而且我没有重新编写很多代码。但是，如果我使用 hacky 替代方案，我将需要考虑边缘情况，以防止 ajax 请求的双重触发等。这也不会混淆默认浏览器行为作为一个很好的奖励（在移动设备上测试）浏览器也一样）。

有时，您只需要退后一步，从全局考虑最简单的解决方案。