代码之家 › 专栏 › 技术社区 › mike

替换“select”元素的下拉菜单?

drop-down-menu javascript

mike · 技术社区 · 6 年前

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

因为这是不可能的(js不能打开 <选择> 元素)我想知道:是否有一个看起来相同(保持真实select元素的原生ua样式)并且工作相同(即在表单中,键盘导航(向上/向下))的下拉替换,除了它可以被js更多地控制之外?

更多背景: 我有一个基于electronjs的应用程序,到目前为止,我使用本机操作系统键盘事件来控制 <选择> 元素,但由于最新更新的操作系统(mac mojave)本机键盘事件不再允许,所以我只能使用js。这个应用程序很大,所以我尽量减少替换本机的工作量 <选择> 菜单有一个定制的。

2 回复 | 直到 6 年前

Lucian Buzzo 6 年前

如果您想设置select输入的值,那么可以使用vanilla 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>