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>

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>