Question

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

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

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

Answer 1

如果要设置选择输入的值，则可以使用普通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/ 搜索

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

2 个答案: