在select菜单中select“不可选”

我有一个select元素与几个选项，但我想要一些选项不可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> 

所以，正如你所看到的，我不希望城市可以直接select，而只是每个城市下的选项。

用户怎样才能点击CITY 1或CITY 2但不会被选中，所以用户不得不select其中一个分支？

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>元素不<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

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> 

Answer 4

有很多选项可以做到这一点，我推荐一个名为Chosen的jquery插件：

这将是：

 <select data-placeholder="Choose a Country..." class="chosen-select chose-select-width-custom" multiple tabindex="4" name="countryDigestValues"> <option value=""></option> <optgroup class="custom-optgroup-class" label="Label Title"> <option class="custom-option-class">Here goes the option to select</option> </optgroup> </select> 

这里是链接https://harvesthq.github.io/chosen/