如何以编程方式告诉HTMLselect下拉(例如,由于鼠标hover)?

如何以编程方式告诉HTML select下拉(例如,由于鼠标hover)?

你不能用HTMLselect标签来做到这一点,但你可以用JavaScript HTML来做到这一点。 有很多现有的控件可以做到这一点 – 例如,附加到SO“有趣/忽略的标签”条目的“build议”列表,或Gmail查找电子邮件地址。

有许多提供此function的JavaScript + HTML控件 – 查找想法的自动完成控件。

看到这个链接的自动完成控制… http://ajaxcontroltoolkit.codeplex.com/

这实际上可以使用HTML + Javascript,尽pipe其他地方人们都说这不是。

不过,这只适用于Chrome。 阅读更多,如果你有兴趣。


根据W3C HTML5工作草案,第3.2.5.1.7节。 互动内容 :

HTML中的某些元素具有激活行为,这意味着用户可以激活它们。 这触发了一系列依赖于激活机制的事件,例如使用键盘或语音input,或通过鼠标点击

当用户以非点击的方式触发具有定义的激活行为的元素时, 交互事件的默认行为必须是对该元素运行合成点击激活步骤。

作为一个交互式内容,我相信可以以编程方式显示它的<option> 。 玩了几个小时之后,我发现使用document.createEvent().dispatchEvent()可以工作。

这就是说,演示时间。 这是一个工作小提琴。


HTML:

 <select id="dropdown"> <option value="Red">Red</option> <option value="Green">Green</option> <option value="Blue">Blue</option> </select> <br> <button id="fire" type="button" onclick="runThis()">Show dropdown items</button>​ 

使用Javascript:

 // <select> element displays its options on mousedown, not click. showDropdown = function (element) { var event; event = document.createEvent('MouseEvents'); event.initMouseEvent('mousedown', true, true, window); element.dispatchEvent(event); }; // This isn't magic. window.runThis = function () { var dropdown = document.getElementById('dropdown'); showDropdown(dropdown); }; 

如果有人find一种方法来做同样的事情,但不是在Chrome中, 请随意修改这个小提琴 。

Xavier Ho的回答是覆盖了目前大多数浏览器中如何解决这个问题。 但是, 不要再用JavaScript来调度/修改事件了 。 (就像在这种情况下,

从版本53+开始,Google Chrome 将不会为不受信任的事件执行默认操作 。 如由脚本创build或修改的事件,或通过dispatchEvent方法dispatchEvent 。 这种变化是为了与Firefox和IE,我认为已经不执行行动alignment。

出于testing目的, Fiddle提供的Xavier的答案在chrome 53+中不起作用。 (我不testingFF和IE)。

参考链接:

https://www.chromestatus.com/features/57188​​03933560832 https://www.chromestatus.com/features/6461137440735232

而initMouseEvent也被弃用

这是我能得到的最接近的,改变元素onmouseover的大小,并恢复大小onmouseout:

  <select onMouseOut="this.size=1;" onMouseOver="this.size=this.length;"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> 

如果有人仍然在寻找这个:

 <select id="dropdown"> <option value="Red">Red</option> <option value="Green">Green</option> <option value="Blue">Blue</option> </select> <br> <button id="fire" type="button" >Show dropdown items</button> 

使用Javascript:

 var is_visible=false; $(document).ready(function(){ $('#fire').click(function (e) { var element = document.getElementById('dropdown'); if(is_visible){is_visible=false; return;} is_visible = true; var event; event = document.createEvent('MouseEvents'); event.initMouseEvent('mousedown', true, true, window); element.dispatchEvent(event); /* can be added for ie compatiblity. optionsSelect.focus(); var WshShell = new ActiveXObject("WScript.Shell"); WshShell.SendKeys("%{DOWN}"); */ e.stopPropagation(); return false; }); $(document).click(function(){is_visible=false; }); }); 

更新:

一直到这个问题没有完美的解决scheme,但你可以尝试避免这种情况。 你为什么要这样做? 我想知道几个月前为移动设备制作一个select插件的解决scheme

https://github.com/HemantNegi/jquery.sumoselect

最后最后用一个透明的select元素屏蔽了自定义div(或其他元素),以便它可以直接与用户交互。

我认为这在Chrome中不再可能。

看来,Chrome的53版本禁用了Asim K T.

根据规范http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

受信任的事件不应触发默认操作(click事件除外)。

然而,他们已经在webview中启用它,但我没有testing过这个。

我们发现一些网页浏览者正在使用fastclick,由于破坏的风险,即使他们不可信,我们也会允许selectmousedown。

在这个讨论中,让开发者以编程方式打开下拉的想法被放弃了。

这是我find的最好的方法。 注意它只适用于Windows上的IE浏览器,并且您的networking可能需要位于安全区域 – 因为我们访问了shell程序。 诀窍是,ALT – 向下箭头是打开select下拉菜单的快捷键。

 <button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()">OPTIONS</button> <select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9"> <option>ABC</option> <option>DEF</option> <option>GHI</option> <option>JKL</option> </select> <script type="text/javascript"> function doClick() { optionsSelect.focus(); var WshShell = new ActiveXObject("WScript.Shell"); WshShell.SendKeys("%{DOWN}"); } </script> 

我可能是错的,但我不相信这是可能的默认select框。 你可以做一些JS和CSS来达到预期的效果,但不是(据我所知)香草SELECT。

不要以为有一样东西是不可能的,当你想要做时,没有什么是不可能的。

使用这个展开一个人创build的JS函数。

http://code.google.com/p/expandselect/

包括这个JS,只是调用传递参数作为你的selectID,就像这样:

 ExpandSelect(MySelect) 

这不完全是你要求的,但我喜欢这个解决scheme,因为它的简单性。 在大多数情况下,我想要启动一个下拉菜单,这是因为我正在validation用户实际上已经做出了select。 我改变了下拉菜单的大小并集中它,这很好地突出了他们跳过的内容:

 $('#cboSomething')[0].size = 3; $('#cboSomething')[0].focus();