在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 1CITY 2但不会被选中,所以用户不得不select其中一个分支?

4 Solutions collect form web for “在select菜单中select“不可选””

您可能正在寻找一个<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> 

我可以从你的问题中看到,以前对我的回答实际上就是你在找的东西,然而只是为了注意将来这个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演示

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> 

有很多选项可以做到这一点,我推荐一个名为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/

  • 是否有可能使用JS打开HTMLselect显示其选项列表?
  • 删除IE上的select箭头
  • HTML表单:select选项与数据select选项
  • 可以在HTML <select>标签中select<optgroup>
  • 使用JavaScript在下拉列表中获取选定的值?
  • 使用AngularJS的ng选项来处理select
  • 防止iPhone缩放forms?
  • 如何更改HTMLselect使用JavaScript的选项?
  • HTML选择框的高度(下拉菜单)
  • 如何解决IEselect问题时dynamic更改选项
  • 点击选项标签不工作在IE浏览器和铬