html - 在选择菜单中设置一些选项 "unselectable"

Question

我有一个带有几个选项的 select 元素，但我希望其中一些选项不可选。

基本上是这样的:

<select>
    <option> CITY 1 </option>
    <option> City 1 branch A </option>
    <option> City 1 branch B </option>
    <option> City 1 branch C </option>
    <option> CITY 2 </option>
    <option> City 2 branch A </option>
    <option> City 2 branch B </option>
    ...
</select>

如您所见，我不希望城市可以直接选择，而只能选择每个城市下的选项。

如何做到用户可以点击CITY 1或CITY 2但不会被选中，因此用户被迫选择其中之一下面的 Twig ？

Answer 1

您可能正在寻找 <optgroup> :

<select>
    <optgroup label="CITY 1">
        <option>City 1 branch A</option>
        <option>City 1 branch B</option>
        <option>City 1 branch C</option>
    </optgroup>

    <optgroup label="CITY 2">
        <option>City 2 branch A</option>
        <option>City 2 branch B</option>
    </optgroup>
</select>

演示:http://jsfiddle.net/Zg9Mw/

如果你确实需要定期<option>无法选择的元素，你可以给他们 disabled属性(这是一个 bool 属性，所以值根本不重要):

<option disabled>City 2 branch A</option>