我有一个输入表单，可让我从多个选项中进行选择，并在用户更改选择时执行某些操作。例如，
<select onChange="javascript:doSomething();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
现在，doSomething()仅在选择更改时被触发。
我想doSomething()在用户选择任何选项时触发，可能再次相同。
我尝试使用“ onClick”处理程序，但是在用户开始选择过程之前就触发了该处理程序。
那么，是否有一种方法可以在用户的每次选择上触发功能？
更新：
达里尔（Darryl）提出的答案似乎奏效，但并不一致。有时，甚至在用户完成选择过程之前，只要用户单击下拉菜单，就会触发该事件！
这是最简单的方法：
<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>
选择时，鼠标选择和键盘上/下键均可使用。
我需要完全一样的东西。这对我有用：
<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
支持以下内容：
当用户选择任何选项时，可能再次选择相同的选项
几个月前创建设计时，我遇到了同样的问题。我发现的解决方案是与要使用的元素.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（）
只是一个想法，但是是否可以对每个<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（））。
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>
将扩展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在每次选择任何选项（包括较早的选项）时运行。
这种方法的缺点是，它打破了使用制表符下拉列表并使用箭头键选择值的能力。这对我来说是可以接受的，因为所有用户一直点击所有内容，直到永恒结束。
如果您确实需要这样才能工作，我会这样做（以确保它可以通过键盘和鼠标工作）
- 将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>
为了在用户每次选择某项（即使是相同的选项）时正确触发一个事件，您只需要欺骗选择框即可。
就像其他人所说的，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>
实际上，当用户使用键盘更改选择控件中的选择时，不会触发onclick事件。您可能必须结合使用onChange和onClick来获取所需的行为。
首先，您将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>这可能无法直接回答您的问题，但是可以通过简单的设计级别调整来解决此问题。我了解这可能并非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应用程序，我发现这种设计选择大大简化了我的代码。在解决此问题之前，我花了几个小时解决这个问题，而不必重新编写很多代码。但是，如果我选择了别具一格的替代方案，则需要考虑一些极端情况，以防止再次触发ajax请求等。这也不会破坏默认的浏览器行为，这是一个不错的收获（在移动设备上进行了测试）浏览器）。
有时，您只需要退后一步，考虑一下最简单的解决方案的概况。
遇到类似问题时，我所做的是在选择框中添加了一个“ onFocus”，它附加了一个新的通用选项（“选择一个选项”或类似选项）并将其默认为选中的选项。
因此，我的目标是能够多次选择相同的值，这实际上将覆盖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>
首先添加一个额外的选项，例如列标题，这将是下拉按钮的默认值，然后单击它并在末尾重置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;
}
关于select标签（在这种情况下）的妙处在于，它将从option标签中获取其值。
尝试：
<select onChange="javascript:doSomething(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="Foo">C</option>
</select>
为我工作得体面。
使用jQuery：
<select class="target">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<script>
$('.target').change(function() { doSomething(); });
</script>
这是我的解决方案，与这里的其他解决方案完全不同。它使用鼠标的位置来确定是否单击了选项，而不是单击选择框以打开下拉菜单。它利用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/
你应该尝试使用 option:selected
$("select option:selected").click(doSomething);
什么对我有用：
<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（）”
尝试以下操作（事件在您选择选项时准确触发，而无需更改选项）：
$("select").mouseup(function() {
var open = $(this).data("isopen");
if(open) {
alert('selected');
}
$(this).data("isopen", !open);
});
<script>
function abc(selectedguy) {
alert(selectedguy);
}
</script>
<select onchange="abc(this.selectedIndex);">
<option>option one</option>
<option>option two</option>
</select>
在这里，您有返回的索引，并且在js代码中，您可以通过一个开关或任何您想要的东西使用此返回。
尝试这个：
<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>
现在很久以前，但在回答原始问题时，这会有所帮助吗？只要把onClick进SELECT线。然后在行中放入您想要OPTION的OPTION内容。即：
<SELECT name="your name" onClick>
<option value ="Kilometres" onClick="YourFunction()">Kilometres
-------
-------
</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>
我曾遇到过类似的需求，最终为相同的代码编写了angularjs指令-
用于element[0].blur();将焦点从选择标签上移开。逻辑是在第二次单击下拉菜单时触发此模糊。
as-select 即使用户在下拉菜单中选择了相同的值也会被触发。
演示-链接
一个正确的答案是不使用选择字段（如果您在重新选择相同的答案时需要执行某些操作。）
使用常规的div，按钮，显示/隐藏菜单创建一个下拉菜单。链接：https：//www.w3schools.com/howto/howto_js_dropdown.asp
如果能够将事件侦听器添加到选项中，就可以避免。如果选择元素存在一个onSelect侦听器。而且，如果在选择字段上单击并没有严重触发mousedown，mouseup并同时在mousedown上全部单击全部，
您需要在此处做一些事情，以确保即使再次选择相同的选项，它也可以记住较旧的值并触发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);
}
});
请注意，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事件，的确，单击时我们丢失了所选项目，如果列表很长，可能会很烦人，但这可能会在某种程度上对您有所帮助..
如何在元素获得焦点时更改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('');
}
});
我找到了解决方案。
最初将select元素的selectedIndex设置为0
//set selected Index to 0
doSomethingOnChange(){
blah ..blah ..
set selected Index to 0
}
将此方法称为onChange事件
文章标签：dom-events , html , html-select , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！
文件下载
评论已关闭！