直接替换"select"元件？

Question

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

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

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

Answer 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>

Answer 2

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