如何以编程方式告诉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/5718803933560832 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();
