是否有一个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(); }); }); 

我看到这个没有选定的答案,所以我想我会给我的意见。 这对我来说效果很好,所以希望别人在卡住时可以使用这些代码。

http://api.jquery.com/live/

编辑:使用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> 

http://jsfiddle.net/dR9tH/19/

这是我的解决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); }); 

http://jsbin.com/dowoloka/4

首先你使用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行。 然后把你想要的每个OPTIONOPTION行中做什么。 即:

 <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(''); } });