我可以这样做，以便无法点击选择中的某些行吗？

Question

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

<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> 

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

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

Answer 1

当然，它被称为<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>

Answer 2

另一种方法是使用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

Answer 3

使用optgroup tag

<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>

Answer 4

我猜你正在寻找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> ​

FIDDLE