0

我有一个标准类型的选择列表：

<select>
  <option value="cars1">Cars 1</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="cars2">Cars 2</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

这只是一个示例，但我想做的是将列表中的 Cars 1 和 Cars 2 作为无法选择的标题。

有什么办法可以做到这一点吗？

4

4 回答 4

6

当然，它被称为<optgroup>: fiddle

<select>
  <optgroup label="Cars 1">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="Cars 2">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
  </optgroup>
</select>
于 2012-07-22T13:53:52.190 回答
5

另一种方法是使用disabled属性：

<select>
  <option value="cars1" disabled>Cars 1</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="cars2" disabled>Cars 2</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

现场演示：Tinkerbin

于 2012-07-22T13:56:50.430 回答
2

使用optgroup 标签

<select>
  <optgroup label="Cars 1">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="Cars 2">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
  </optgroup>
</select>
于 2012-07-22T13:55:08.617 回答
0

我猜你正在寻找 optgroup：

<select>
    <optgroup label="Cars 1">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="Cars 2">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
</select> ​

小提琴

于 2012-07-22T13:55:43.927 回答