如何以编程方式告诉 HTMLselect下拉（例如，由于鼠标悬停）？
如何以编程方式告诉 HTML SELECT 下拉（例如，由于鼠标悬停）？
IT技术
javascript
html
2021-02-05 06:31:35
6个回答
这曾经实际上可以通过 HTML+Javascript 实现，尽管其他地方的人都说它不是，但它后来被弃用，现在不起作用。
但是，这只适用于 Chrome。如果您有兴趣，请阅读更多内容。
根据W3C 工作草案 HTML5，第 3.2.5.1.7 节。互动内容：
HTML 中的某些元素具有激活行为，这意味着用户可以激活它们。这会根据激活机制 [...] 触发一系列事件，例如使用键盘或语音输入，或通过鼠标点击。
当用户以点击以外的方式触发具有定义激活行为的元素时，交互事件的默认操作必须是在元素上运行合成点击激活步骤。
<select>作为交互式内容，我相信可以以编程方式显示其<option>s。玩了几个小时后，我发现使用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);
};
如果有人找到了一种方法来做同样的事情但不是在 Chrome 中，请随时修改这个 fiddle。
Xavier Ho 的回答涵盖了如何解决目前大多数浏览器中的问题。但是，“不再通过 JavaScript 分派/修改”事件是一种很好的做法。（比如，mousedown在这种情况下）
从 53+ 版本开始，谷歌浏览器不会对不受信任的事件执行默认操作。例如由脚本创建或修改的事件，或通过dispatchEvent方法调度的事件。此更改是为了与我认为已经没有执行此操作的 Firefox 和 IE 保持一致。
出于测试目的，Fiddle提供的 Xavier 的答案不适用于 chrome 53+。（我不测试它 FF 和 IE）。
参考链接：
https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232
并且 initMouseEvent 也已弃用
这是我能得到的最接近的方法，在mouseover 上更改元素的大小，并在mouseout 上恢复大小：
<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>我有同样的问题，我发现解决这个问题的更简单的方法是使用 HTML 和 CSS。
首先，让你<select>透明 ( opacity: 0;)。然后，将按钮放在<select>. 按钮上的点击将被<select>组件捕获。
select{
opacity: 0;
position: absolute;
}<select>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<button>click</button>您不能使用 HTML 选择标记来执行此操作，但可以使用 JavaScript和HTML来执行此操作。有多种现有控件可以执行此操作 - 例如，附加到 SO“interesting/ignored tag”条目的“suggest”列表，或 Gmail 对电子邮件地址的查找。
有许多 JavaScript+HTML 控件提供此功能——寻找自动完成控件以获得想法。
请参阅此链接以了解自动完成控件... http://ajaxcontroltoolkit.codeplex.com/