我有一个输入表单，可以让我从多个选项中进行选择，并在用户更改选项时执行某些操作。例如，
<select onChange="javascript:doSomething();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
现在，只有在选择更改时才会触发doSomething()。
我想在用户选择任何选项时触发doSomething()，可能再次选择相同的。
我尝试使用“onClick”处理程序，但在用户启动选择过程之前会触发该处理程序。
那么，有没有办法在用户的每次选择中触发一个函数？
更新
Darryl建议的答案似乎有效，但它不能始终如一地运作。有时，只要用户点击下拉菜单，即使在用户完成选择过程之前，事件也会被触发！
答案 0 :(得分：80)
这是最简单的方法：
<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>
使用鼠标选择和键盘向上/向下键可以选择聚焦。
答案 1 :(得分：54)
我需要完全相同的东西。这对我有用：
<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
支持：
当用户选择任何选项时，可能再次选择
答案 2 :(得分：11)
几个月前我创建设计时遇到了同样的问题。我找到的解决方案是在您使用的元素上将.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();
});
});
我看到这个没有选定的答案，所以我想我会给出我的意见。这对我来说非常有效，所以希望其他人在遇到困难时可以使用这段代码。
修改：使用on选择器而不是.live。请参阅jQuery .on()
答案 3 :(得分：8)
只是一个想法，但是可以对每个<option>元素进行onclick吗？
<select>
<option onclick="doSomething(this);">A</option>
<option onclick="doSomething(this);">B</option>
<option onclick="doSomething(this);">C</option>
</select>
另一种选择可能是在select上使用onblur。当用户点击选择时，这将触发。此时，您可以确定选择了哪个选项。为了在正确的时间触发此操作，选项的onclick可能会模糊字段（在jQuery中使其他活动或只是.blur（））。
答案 4 :(得分：6)
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>
答案 5 :(得分：5)
继续扩展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在每次选择包括早期选项在内的任何选项时运行。
这种方法的缺点是它会破坏标签到下拉菜单的功能，并使用箭头键选择值。这对我来说是可以接受的，因为所有用户都会一直点击所有内容，直到永恒结束。
答案 6 :(得分：4)
要在每次用户选择某事时（即使是相同的选项）正确触发事件，您只需要欺骗选择框。
像其他人所说的那样，在焦点上指定负selectedIndex以强制更改事件。虽然这确实允许你欺骗选择框，但只要它仍然具有焦点，它就不会起作用。简单的解决方法是强制选择框模糊，如下所示。
<select onchange="myCallback();" onfocus="this.selectedIndex=-1;this.blur();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<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>
您可以看到working demo here。
答案 7 :(得分：4)
如果你真的需要这样工作，我会这样做（以确保它通过键盘和鼠标工作）
不幸的是，onclick会多次运行（例如onpening the select ...和on selection / close）并且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>
答案 8 :(得分：3)
实际上，当用户使用键盘更改选择控件中的选择时，onclick事件不会触发。您可能必须使用onChange和onClick的组合来获取您正在寻找的行为。
答案 9 :(得分：2)
所以我的目标是能够多次选择相同的值，这实际上会覆盖onchange（）函数并将其转换为有用的onclick（）方法。
基于上述建议，我提出了适用于我的建议。
<select name="ab" id="hi" onchange="if (typeof(this.selectedIndex) != undefined) {alert($('#hi').val()); this.blur();}" onfocus="this.selectedIndex = -1;">
<option value="-1">--</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
答案 10 :(得分：2)
我在遇到类似问题时所做的是我在选择框中添加了一个'onFocus'，它会附加一个新的通用选项（'选择一个选项'或类似的东西）并将其默认为所选选项。
答案 11 :(得分：1)
首先添加一个额外选项，例如列标题，这将是下拉按钮的默认值，然后单击它并在doSomething()的末尾进行重置，因此选择A / B / C，onchange事件总是触发，当选择为State时，什么也不做然后返回。 onclick非常不稳定，就像前面提到的许多人一样。因此，我们要做的就是制作一个与您的真实选项不同的初始按钮标签，以便onchange可以在任何选项上使用。
<select id="btnState" onchange="doSomething(this)">
<option value="State" selected="selected">State</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
function doSomething(obj)
{
var btnValue = obj.options[obj.selectedIndex].value;
if (btnValue == "State")
{
//do nothing
return;
}
// Do your thing here
// reset
obj.selectedIndex = 0;
}
答案 12 :(得分：1)
使用jquery：
<select class="target">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<script>
$('.target').change(function() { doSomething(); });
</script>
答案 13 :(得分：1)
select标签（在这种情况下）的奇妙之处在于它将从选项标签中获取其值。
尝试：
<select onChange="javascript:doSomething(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="Foo">C</option>
</select>
为我工作得体。
答案 14 :(得分：1)
这是我的解决方案，与此处的任何其他内容完全不同。它使用鼠标位置来确定是否单击了一个选项，而不是单击选择框以打开下拉列表。它使用event.screenY位置，因为这是唯一可靠的跨浏览器变量。必须首先附加悬停事件，以便它可以在点击事件之前找出相对于屏幕的控件位置。
var select = $("select");
var screenDif = 0;
select.bind("hover", function (e) {
screenDif = e.screenY - e.clientY;
});
select.bind("click", function (e) {
var element = $(e.target);
var eventHorizon = screenDif + element.offset().top + element.height() - $(window).scrollTop();
if (e.screenY > eventHorizon)
alert("option clicked");
});
这是我的jsFiddle http://jsfiddle.net/sU7EV/4/
答案 15 :(得分：1)
您应该尝试使用option:selected
$("select option:selected").click(doSomething);
答案 16 :(得分：1)
您需要在此处做一些事情，以确保即使再次选择相同的选项，它也能记住较早的值并触发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);
}
});
答案 17 :(得分：1)
首先，你使用onChange作为事件处理程序，然后使用flag变量使它在你每次进行更改时执行你想要的功能
[{'end': 5,
'lik': 33.791537281734904,
'preds': array([0, 2, 0, 1, 2, 2]),
'sixth': [-0.01, -0.01, -0.01],
'start': 0},
{'end': 6,
'lik': 33.28967307589143,
'preds': array([0, 0, 1, 2, 2, 2]),
'sixth': [-0.01, -0.01, -0.01],
'start': 1},
{'end': 7,
'lik': 34.446813870838156,
'preds': array([0, 1, 2, 2, 2, 2]),
'sixth': [-0.01, -0.01, -0.01],
'start': 2}]
<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;
}
}
答案 18 :(得分：1)
<script>
function abc(selectedguy) {
alert(selectedguy);
}
</script>
<select onchange="abc(this.selectedIndex);">
<option>option one</option>
<option>option two</option>
</select>
这里返回了索引，在js代码中，您可以使用一个开关或任何您想要的返回值。
答案 19 :(得分：1)
什么对我有用：
<select id='myID' onchange='doSomething();'>
<option value='0' selected> Select Option </option>
<option value='1' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > A </option>
<option value='2' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > B </option>
</select>
这样，onchange会在选项更改时调用'doSomething（）'，并且 当onchange事件为false时，onclick会调用'doSomething（）'，换句话说，当您选择相同的选项时
答案 20 :(得分：1)
尝试此操作（当您选择选项时完全触发事件，而不更改选项）：
$("select").mouseup(function() {
var open = $(this).data("isopen");
if(open) {
alert('selected');
}
$(this).data("isopen", !open);
});
答案 21 :(得分：0)
另一种解决方案是使用 onMouseUp 事件。 OnMouseUp 也适用于重新选择的相同选项以及更改的选项。
唯一的缺点。该代码在下拉框打开时调用，第二次在进行选择时调用。对于 AJAX 请求，请记住这一点。 如果这不会损害您的逻辑，您可以将其用作简单的内联 hack。
<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>
答案 22 :(得分：0)
唯一的答案是不使用选择字段（如果您在重新选择相同答案时需要执行某些操作。）
使用传统的div，按钮，显示/隐藏菜单创建一个下拉菜单。链接：https://www.w3schools.com/howto/howto_js_dropdown.asp
如果能够向选项添加事件侦听器，本可以避免。如果有一个onSelect侦听器用于select元素。如果点击选择字段并没有加剧mousedown，mouseup，并在mousedown上同时点击all。
答案 23 :(得分：0)
这可能无法直接回答您的问题，但可以通过简单的设计级别调整来解决此问题。我知道这可能不是100％适用于所有用例，但我强烈建议您考虑重新考虑您的应用程序的用户流程，以及是否可以实现以下设计建议。
我决定做一些简单的事情，而不是使用其他非真正用于此目的的事件（onChange()，blur等）来隐藏click的替代方案。
我解决它的方式：
只需预先添加占位符选项标记，例如对其没有任何价值的选择。
所以，不要只使用以下需要黑客替代方案的结构：
<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请求的双重触发等。这也不会将默认浏览器行为搞砸为一个不错的奖励（在移动设备上测试）浏览器也是如此）。
有时，您只需退后一步，考虑最简单的解决方案。
答案 24 :(得分：0)
我知道这个问题现在已经很老了，但是对于仍然遇到这个问题的任何人，我都可以通过在自己的网站上添加一个onInput事件到我的option标记中，然后在被调用的函数中检索该值来实现此目标选项输入。
<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>
答案 25 :(得分：0)
我遇到过类似的需求，最后为同一个人写了一个angularjs指令 -
使用element[0].blur();删除select标记的焦点。逻辑是在第二次下拉时触发此模糊。
as-select也会被触发。
DEMO - link
答案 26 :(得分：0)
<select name="test[]"
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
答案 27 :(得分：0)
很久以前，现在回答原来的问题，这会有帮助吗？
只需将onClick放入SELECT行即可。
然后在OPTION行中放置您希望每个OPTION执行的操作。
即：
<SELECT name="your name" onClick>
<option value ="Kilometres" onClick="YourFunction()">Kilometres
-------
-------
</SELECT>
答案 28 :(得分：0)
试试这个：
<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>
答案 29 :(得分：-1)
我发现了这个解决方案。
将select元素的selectedIndex设置为0
//set selected Index to 0
doSomethingOnChange(){
blah ..blah ..
set selected Index to 0
}
调用此方法onChange事件
答案 30 :(得分：-1)
当元素获得焦点时，如何更改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('');
}
});
答案 31 :(得分：-1)
请注意，IE上的OPTION标签不支持事件处理程序，但思路很快..我想出了这个解决方案，试试看，并给我你的反馈意见：
<script>
var flag = true;
function resetIndex(selObj) {
if(flag) selObj.selectedIndex = -1;
flag = true;
}
function doSomething(selObj) {
alert(selObj.value)
flag = false;
}
</script>
<select onchange="doSomething(this)" onclick="resetIndex(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
我在这里做的实际上是重置选择索引，以便始终触发onchange事件，如果你点击时我们丢失了所选项目，如果你的列表很长，它可能很烦人，但它可能有帮助你在某种程度上......
答案 32 :(得分：-1)
您可以使用onChange：http://www.w3schools.com/TAGS/tag_Select.asp
从http://www.faqs.org/docs/htmltut/forms/_SELECT_onChange.html复制 onChange指定在用户选择其中一个选项时运行的JavaScript。这意味着当用户选择项目时立即启动操作，而不是在按下“提交”按钮时启动。