是否有一个onSelect事件或等价的HTML <select>？
我有一个input表单，可以让我从多个选项中进行select，并在用户更改select时执行一些操作。 例如，
<select onChange="javascript:doSomething();"> <option>A</option> <option>B</option> <option>C</option> </select> 现在， doSomething()只会在select更改时被触发。
我想触发doSomething()当用户select任何选项，可能是同一个了。
我曾尝试使用“onClick”处理程序，但在用户启动select过程之前会触发该处理程序。
那么，有没有办法在用户每次select时触发一个函数？
更新：
达里尔提出的答案似乎有效，但并不一致。 有时只要用户点击下拉菜单，即使在用户完成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>
兼顾鼠标select和键盘上/下键select焦点。
我需要的东西完全一样。 这对我来说是有效的：
<select onchange="doSomething();" onfocus="this.selectedIndex = -1;"> <option>A</option> <option>B</option> <option>C</option> </select>
几个月前我在创作一个devise时，也遇到了同样的问题。 我find的解决scheme是使用.live("change", function())与您正在使用的元素上的.blur()相结合。
如果你希望在用户点击时做一些事情，而不是改变，只需用clickreplace。
我为我的下拉列表分配了一个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(); }); });
我看到这个没有选定的答案，所以我想我会给我的意见。 这对我来说效果很好，所以希望别人在卡住时可以使用这些代码。
编辑：使用select器而不是.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>
另一个select可能是在select上使用onblur。 只要用户点击远离select，这将会触发。 此时您可以确定select了哪个选项。 为了在正确的时间触发这个触发器，选项的onclick可以使字段模糊（在jQuery中使其他的活动或只是.blur（））。
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>
如果你真的需要这样的工作，我会这样做（确保它通过键盘和鼠标）
- 将onfocus事件处理程序添加到select以设置“当前”值
- 将onclick事件处理程序添加到select以处理鼠标更改
- 将onkeypress事件处理程序添加到select以处理键盘更改
不幸的是，onclick将会运行多次（例如，在select…和select/closures时），当没有任何变化时，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一个事件（即使是相同的选项），正确地触发一个事件，你只需要欺骗select框。
像其他人所说的那样，在焦点上指定一个负的selectedIndex来强制更改事件。 虽然这可以让你欺骗select框，但只要它仍然有焦点，它不会工作。 简单的解决方法是强制select框模糊，如下所示。
标准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>
你可以在这里看到一个工作演示 。
去扩展jitbit的答案。 当你点击下拉菜单，然后点击下拉菜单而没有select任何东西的时候，我发现它很奇怪。 结束了以下几点：
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>
实际上，当用户使用键盘改变select控件中的select时，onclick事件不会触发。 您可能必须使用onChange和onClick的组合来获取您要查找的行为。
我遇到类似的问题时所做的是我添加了一个'onFocus'到附加了一个新的通用选项（'select一个选项'或类似的）的select框，并默认为选定的选项。
所以我的目标是能够多次select相同的值，基本上覆盖了onchange（）函数，并将其变成一个有用的onclick（）方法。
基于上面的build议，我想出了这个对我有用的东西。
<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>
这是我的解决scheme，完全不同于这里的任何其他。 它使用鼠标位置来确定是否点击了一个选项，反对点击select框打开下拉菜单。 它利用了event.screenY的位置，因为这是唯一可靠的跨浏览器variables。 必须首先附加一个hover事件，以便在点击事件之前找出相对于屏幕的控件位置。
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在onchange事件为false时调用“doSomething（）”，换句话说，当您select相同的选项时
试试这个（当你select选项时没有改变选项的情况下触发的事件）：
$("select").mouseup(function() { var open = $(this).data("isopen"); if(open) { alert('selected'); } $(this).data("isopen", !open); });
首先你使用onChange作为一个事件处理程序，然后使用标志variables使它做你想要的function，每当你做出改变
<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>
select标记（在这种情况下）的好处是，它将从选项标记中获取其值。
尝试：
<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>
尝试这个：
<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行。 然后把你想要的每个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>
我find了这个解决scheme。
最初将select元素的selectedIndex设置为0
//set selected Index to 0 doSomethingOnChange(){ blah ..blah .. set selected Index to 0 }
调用此方法onChange事件
我曾经面临过类似的需求，最后写了一个相同的angularjs指令 –
guthub链接 – angular度select
使用过的element[0].blur(); 删除select标签的焦点。 逻辑是在第二次点击下拉时触发这个模糊。
即使用户在下拉列表中select了相同的值， as-select也会被触发。
DEMO – 链接
一个真正的答案是不使用select字段（如果你需要做一些事情，当你重新select相同的答案。）
用传统的div，button，显示/隐藏菜单创build一个下拉菜单。 链接： https ： //www.w3schools.com/howto/howto_js_dropdown.asp
可以避免有人能够添加事件监听器的选项。 如果有select元素的onSelect侦听器。 如果点击select字段不加重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： http : //www.w3schools.com/TAGS/tag_Select.asp
复制从http://www.faqs.org/docs/htmltut/forms/_SELECT_onChange.html onChange指定一个JavaScript运行时，用户select其中的一个选项。 这意味着，当用户select一个项目时，而不是当按下“提交”button时，立即启动一个动作。
请注意，事件处理程序不支持IE浏览器上的OPTION标签，只需要快速思考。我想出了这个解决scheme，试试看，并给我反馈：
<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>
我在这里做的实际上是重置select索引，以便onchange事件总是会被触发，当你点击的时候我们会丢失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(''); } });
