另一个解决方案是使用onMouseUp事件。 OnMouseUp也与相同的选项重新选择以及改变选项。

只有劣势。当打开下拉框时调用该代码，当做出选择时调用第二次。对于AJAX请求，请记住这一点。 如果这不会损害你的逻辑，你可以使用它作为一个简单的内联黑客。

<select id="bla" onmouseup="console.log( document.getElementById('bla').options[document.getElementById('bla').selectedIndex].value );">
  <option value="0">A</option>
  <option value="1">B</option>
</select>

2022香草javascript

.．.因为这是谷歌的热门节目。

最初的海报没有要求一个JQuery解决方案，但所有的答案只演示JQuery或内联选择标签事件。

使用'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);

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

测试自己:

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

这是最简单的方法:

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

工作与鼠标选择和键盘上/下键时，选择是集中。

这里有几件事要做，以确保它记住旧的值，并在再次选择相同的选项时触发onchange事件。

首先你需要一个常规的onChange事件:

$("#selectbox").on("change", function(){
    console.log($(this).val());
    doSomething();
});

要想在再次选择相同的选项时触发onChange事件，可以在下拉菜单接收焦点时通过将其设置为无效值来取消设置所选选项。但你也想存储之前选择的值，以便在用户没有选择任何新选项的情况下恢复它:

prev_select_option = ""; //some kind of global var

$("#selectbox").on("focus", function(){
    prev_select_option = $(this).val(); //store currently selected value
    $(this).val("unknown"); //set to an invalid value
});

上面的代码将允许您触发onchange，即使选择了相同的值。但是，如果用户在选择框外单击，则希望恢复以前的值。我们在onBlur上做:

$("#selectbox").on("blur", function(){
    if ($(this).val() == null) { 
       //because we previously set an invalid value 
       //and user did not select any option
        $(this).val(prev_select_option);
    }
});

这可能不能直接回答你的问题，但这个问题可以通过简单的设计调整来解决。我知道这可能不是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).

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