如何通过标签、::before 或以编程方式打开 <select />？答案

【问题标题】：How to open a <select /> via label, ::before, or programatically?如何通过标签、::before 或以编程方式打开 <select />？
【发布时间】：2020-04-30 18:45:13
【问题描述】：

任何解决方案只需要在 WebKit 浏览器中工作。

互联网上充斥着使这项工作可行的尝试-有些人声称可以使其正常工作，有些人则声称无法做到。根据我的经验，建议的方法都没有奏效。这根本不可能吗？

假设我有一个像 <select id="mySelect" /> 这样的选择

我尝试过的事情：

select::before -- 添加到 DOM，但不渲染
<label for="mySelect" /> -- 点击/点击时什么都不做
document.querySelector('select').click() -- 什么都不做
The method from this answer (React-specific) -- 无法分配 click 处理程序或任何其他可以以编程方式打开 select 的处理程序

我什至对 jQuery 解决方案持开放态度，即使我们正在使用 React 并且我们将加载 jQuery 单独以触发 select 打开。

在第三方选择组件上：目标是为用户触发移动操作系统的原生选择控件，所以像 React-Select 这样的东西并不适合。

【问题讨论】：

曾经有一些以编程方式打开选择的方法，但我相信它们都已从现代浏览器中删除。目前没有用户实际点击它的方式打开一个选择
你总是可以走不同的路线。创建您自己的或使用第三方插件将选择转换为“漂亮选择”或任何您想要调用的列表。之后它被转换，它现在是一个 div 或类似的东西，可以通过 javascript 控制和打开。
这能回答你的问题吗？ How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?。请注意the answer that claims it is possible in Chrome 上最受好评的评论，其中提到它在 Chrome 53 中已被弃用...

标签： javascript html jquery css dom

【解决方案1】：

从这里更新的肮脏解决方案 (https://stackoverflow.com/a/249219/3684265)

var _select = document.getElementById("test");

_select.addEventListener("mouseout",function(){
  this.size = 1;
});

_select.addEventListener("mouseover",function(){
  this.size = 4;//set to show the number that you want
});

<select id="test">
  <option value="1">1</option>
  <option value="1">2</option>
  <option value="1">3</option>
  <option value="1">4</option>
  <option value="1">5</option>
  <option value="1">6</option>
</select>

【讨论】：