HTML select 选择

1. 基本用法

创建基本的下拉列表

<select name="car">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

在上面的例子中，我们创建了一个名为 "car" 的下拉列表，包含四个选项：Volvo、Saab、Mercedes 和 Audi。

设置默认选项

要设置默认选项，只需在 <option> 标签中添加 selected 属性：

<select name="car">
  <option value="volvo">Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

在上面的例子中，Saab 将被选为默认选项。

2. 多选下拉列表

通过在 <select> 标签中添加 multiple 属性，您可以允许用户选择多个选项：

<select name="cars" multiple size="4">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

在上面的例子中，size="4" 属性定义了下拉列表的可见选项数量。

3. 使用 <optgroup>

如果您需要对下拉列表中的选项进行分组，可以使用 <optgroup> 标签：

<select name="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

在上面的例子中，我们使用 <optgroup> 标签将汽车品牌分为瑞典汽车和德国汽车两个组。

4. 更多属性

disabled

disabled 属性可以阻止用户选择某个选项：

<select name="cars">
  <option value="volvo" disabled>Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

onchange

onchange 属性允许您在用户更改选项时触发 JavaScript 函数：

<select name="cars" onchange="alert('You changed the selection!');">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

总结

通过本教程，您应该已经掌握了如何使用 HTML <select>、<option> 和 <optgroup> 标签来创建功能齐全的下拉列表。现在，您可以开始在您的项目中应用这些知识，为用户提供更好的交互体验。