我有一个输入表单，它允许我从多个选项中进行选择，并在用户更改选择时执行一些操作。例如,
<select onChange="javascript:doSomething();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
现在，doSomething()只在选择改变时被触发。
我想在用户选择任何选项时触发doSomething()，可能是相同的选项。
我已经尝试使用“onClick”处理程序，但在用户开始选择过程之前被触发。
那么，是否有一种方法在用户每次选择时触发一个函数?
更新:
Darryl提出的答案似乎有效，但并不总是有效。有时，当用户单击下拉菜单时，甚至在用户完成选择过程之前，事件就会被触发!
只是一个想法，但有可能把每个<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())。
你可以使用onChange: http://www.w3schools.com/TAGS/tag_Select.asp
摘自http://www.faqs.org/docs/htmltut/forms/_SELECT_onChange.html onChange指定当用户选择其中一个选项时要运行的JavaScript。这意味着当用户选择一个项目时，操作将立即启动，而不是当按下“提交”按钮时。
请注意，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中添加一个onfocus事件处理程序来设置“current”值 向选择中添加onclick事件处理程序以处理鼠标更改 向select添加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>
当元素获得焦点时改变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标记(在这个场景中)的奇妙之处在于它将从选项标记中获取它的值。
Try:
<select onChange="javascript:doSomething(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="Foo">C</option>
</select>
对我来说还不错。
这是最简单的方法:
<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>
工作与鼠标选择和键盘上/下键时，选择是集中。
使用jquery:
<select class="target">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<script>
$('.target').change(function() { doSomething(); });
</script>
我找到了这个解。
初始化select元素的selectedIndex为0
//set selected Index to 0
doSomethingOnChange(){
blah ..blah ..
set selected Index to 0
}
将此方法调用为onChange事件
几个月前我做设计的时候也遇到了同样的问题。我发现的解决方案是在你正在使用的元素上使用.live("change"， function())结合.blur()。
如果你想让它在用户点击时做一些事情，而不是改变，只需用点击替换改变。
我为我的下拉菜单分配了一个ID，选择并使用如下:
$(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()
试试这个:
<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>
我需要一模一样的东西。这对我来说很管用:
<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
支持:
当用户选择任何选项时，可能又是同一个选项
这是我的解，和这里的解完全不同。它使用鼠标位置来确定是否单击了某个选项，而不是单击选择框打开下拉菜单。它利用事件。屏幕y位置，因为这是唯一可靠的跨浏览器变量。必须首先附加悬停事件，以便在单击事件之前计算出控件相对于屏幕的位置。
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/
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>
为了在用户每次选择某个东西(甚至是相同的选项)时正确地触发一个事件，您只需要欺骗选择框。
如其他人所说，在focus上指定一个负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放到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>
对我有用的方法:
<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);
});
http://jsbin.com/dowoloka/4
因此，我的目标是能够多次选择相同的值，这基本上覆盖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>
http://jsfiddle.net/dR9tH/19/
我要扩展一下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在每次选择任何选项(包括先前的选项)时运行。
这种方法的缺点是，它破坏了在下拉菜单上使用tab键并使用方向键选择值的功能。这对我来说是可以接受的，因为所有用户都会一直点击所有内容，直到永恒结束。
我曾经遇到过类似的需求，最终为同样的-写了一个angularjs指令
Guthub链接-角选择
使用元素[0].blur ();将焦点从选择标记上移除。逻辑是触发这种模糊的第二次点击下拉菜单。
即使用户在下拉菜单中选择了相同的值，也会触发As-select。
DEMO - link
唯一正确的答案是不使用选择字段(如果您需要在重新选择相同的答案时执行某些操作)。
创建一个下拉菜单与传统的div，按钮，显示/隐藏菜单。链接:https://www.w3schools.com/howto/howto_js_dropdown.asp
如果能够将事件监听器添加到选项中，就可以避免这种情况。如果select元素有onSelect监听器。如果点击选择字段没有烦人地触发mousedown, mouseup，和同时点击mousedown。
<script>
function abc(selectedguy) {
alert(selectedguy);
}
</script>
<select onchange="abc(this.selectedIndex);">
<option>option one</option>
<option>option two</option>
</select>
这里你有一个返回的索引，在js代码中你可以使用这个返回一个开关或任何你想要的东西。
首先，你使用onChange作为事件处理程序，然后使用标志变量，使它做你想要的功能，每次你做一个改变
<select
var list = document.getElementById("list"); Var标志= true; 列表。Onchange = function () { 如果(国旗){ 文档。背景=“红色”; Flag = false; 其他}{ 文档。背景=“绿色”; Flag = true; ｝ ｝ <选择id = "列表" > <选项> op1 > < /选项 <选项> op2 > < /选项 <选项> op3 > < /选项 < /选择>
这可能不能直接回答你的问题，但这个问题可以通过简单的设计调整来解决。我知道这可能不是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).
有时候，你只需要退一步，从大局出发，寻找最简单的解决方案。
添加一个额外的选项作为第一个，就像一个列的标题，这将是下拉按钮的默认值，然后单击它并在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;
}
这里有几件事要做，以确保它记住旧的值，并在再次选择相同的选项时触发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);
}
});
我知道这个问题现在已经很老了，但是对于仍然遇到这个问题的人来说，我已经通过向我的选项标记添加onInput事件来实现了这一点，然后在被调用的函数中，检索该选项输入的值。
<选择id='dropdown' on输入='myFunction()'> <选项value = " 1 " > < /选项> <选项value = " 2 " > < /选项> 选择< - > < p >输出:< / p > <跨越id =“输出”> < /跨越> <类型=“短信/ javascript脚本”> 我的功能() var optionValue =文档。getElementById(“dropdown”)。 文件输出getElementById(“”)。内html =选择值; 的 剧本< - >
另一个解决方案是使用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>
唯一对我有效的解决方案是完全重置SELECT on“onFocus”事件。这样，SELECT总是在"onChange"事件上"changes":
$('select').on('focus', function(ev) {
var $select = $(this);
var options = $select.html();
$select.empty();
$select.append(options);
});
$('select').on('change', function(ev) {
// Now the select element ALWAYS fires onChange
});
我发现的最佳解决方案是在select元素的第一个元素中添加一个禁用选项，以便所有其他项目都可以响应onchange事件中的单击。
<select onchange="doSomething()">
<option disabled selected value> -- select an option -- </option>
<option>A</option>
<option>B</option>
<option>C</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 > < /选项 < /选择>
