在选择菜单中选择"无法选择"的选项

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不会被选中,因此用户被迫选择下面的一个分支？

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>

Answer 2

我可以从你的问题中看到我之前的答案实际上是你正在寻找的东西,但是只是要注意未来的人来到这个StackOverflow问题,我自己寻找类似的答案,他们可以在一个选项中简单地键入'Disabled'.

<select>
  <option value="apple" disabled>Apple</option>
  <option value="peach">Peach</option>
  <option value="pear">Pear</option>
  <option disabled="true" value="orange">Orange</option>
</select>

JSFiddle演示

Answer 3

来自：如何在默认情况下显示禁用 HTML 选择选项？

这是做同样事情的另一种方式。

编辑：（现在你可以在这里运行它）

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none">Select One</option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>

Answer 4

jsFiddle Demo

你会用 <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>