是否可以直接替换“选择”元素？

Question

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

因为这是不可能的（JS无法打开<select>元素），我想知道：是否有一个看起来一样的插入式替换（保持真正的select元素的本机UA样式）并且工作相同（即，在窗体，键盘中）导航（上/下）），但可以通过JS进行更多控制吗？

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

Answer 1

如果要设置选择输入的值，则可以使用普通javascript来实现。 给定这样的select元素：

<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/搜索