使选择菜单中的某些选项“不可选择”

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 却不会被选中，所以用户被迫选择下面的分支之一？

原文由 user961627 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 属性（它是一个布尔属性，所以值根本不重要）：

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

原文由 Blender 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在众多回应中。这取决于你想用第一个选项做什么。如果您想将其显示为某种指南。例如，选项 1 是“选择城市”，但您不希望用户选择它。

  <option style={{display: "none"}}>Select City</option>

通过使用上面的代码，选择城市将是默认选项。但是用户将无法从选项中选择它。使用 disable 不会呈现默认值，也不会选择。如果您想有条件地禁用该选项，您可以考虑使用 if 语句。

原文由 Oladipupo Bùnmi 发布，翻译遵循 CC BY-SA 4.0 许可协议