替换“选择”元素？答案

【问题标题】：Drop-in replacement for "select" element?替换“选择”元素？
【发布时间】：2018-10-06 11:16:12
【问题描述】：

我需要使用 javascript 控制 <select> 元素（打开它、浏览其选项、选择值等）。

因为这是不可能的（JS 无法打开 <select> 元素）我想知道：是否有一个看起来相同（保持真实选择元素的本机 UA 样式）并且工作相同（即在表单，键盘导航（上/下）），除了它可以更多地由 JS 控制？

更多背景：我有一个基于 ElectronJS 的应用程序，直到现在我使用本机操作系统键盘事件来控制 <select> 元素，但由于操作系统（Mac Mojave）的最新更新不再允许本机键盘事件，所以我只能使用 JS。该应用程序非常大，所以我试图尽量减少将原生 <select> 菜单替换为自定义菜单的工作量。

【问题讨论】：

“要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是无关紧要的，因为它们往往会吸引固执己见的答案和垃圾邮件。”

标签： javascript drop-down-menu

【解决方案1】：

如果你想设置一个选择输入的值，那么你可以使用 vanilla javascript 来做到这一点。给定一个这样的选择元素：

<select id="my-select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

您可以使用以下 javascript 来更改值：

document.getElementById('my-select').value = 'saab'

<select id="test-select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
<button onClick="document.getElementById('test-select').value = 'fiat'">Click me</Button>

【讨论】：

我需要打开选择菜单并使用 javascript 浏览选项。我正在开发一个电视应用程序，因此必须远程（使用 JS）而不是使用键盘或鼠标进行导航。

【解决方案2】：

您可以使用 select2 库
https://select2.org/ 带搜索

【讨论】：