javascript - SELECT控件，如何设置要显示的内容

Question

我对此有一些疑问:

<select name="whatever">
<option value="pizza">pizza</option>
<option value="pasta">pasta</option>
<option value="sandwich">sandwich</option>
<option value="cheese">cheese</option>
</select>

选择 当我“运行”时始终控制它在下拉菜单中第一个显示比萨饼，这意味着默认选择比萨饼。那么，如果我想将奶酪发布为默认值(当前在下拉列表中处于事件状态)，我该如何更改它 这只是我想如何处理我的选择的一个例子，你看到一个 placeholder=5 ，这意味着这个数字控件默认使用 5 并且我想用我的选择控件做类似的事情。

<input type='number' placeholder=5 min=0 max=10 step=1>

谢谢!

Answer 1

您只需将 selected 属性放在您想要的选项上作为默认选项即可。

您可以使用 JavaScript 函数从表中获取值并将该值指定为下拉列表的选定选项。选择下拉列表的选项由从 0 开始的索引标识。

在下面的演示中，我使用了按钮来调用 JS 函数。单击按钮更改所选选项:

var sel = document.getElementsByName("whatever")[0];

function defaultOption(option) {
  sel.options[option].selected = 'selected';
}

<button onClick="defaultOption(0)">pizza</button>
<button onClick="defaultOption(1)">pasta</button>
<button onClick="defaultOption(2)">sandwich</button>
<button onClick="defaultOption(3)">cheese</button>
</br>
</br>
<select name="whatever">
  <option value="pizza">pizza</option>
  <option value="pasta">pasta</option>
  <option value="sandwich">sandwich</option>
  <option value="cheese" selected>cheese</option>
</select>