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

Make some options in a select menu "unselectable"

提问by user961627

I have a selectelement with a few options, but I want some of the options to not be selectable.

我有一个select包含几个选项的元素，但我希望某些选项不可选。

Basically it's like this:

基本上是这样的：

<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>

So as you can see, I don't want the cities do be directly selectable, but only the options that come under each city.

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

How can it be done that the user can click on CITY 1or CITY 2but it won't be selected, so the user is forced to choose one of the branches underneath?

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

回答by Blender

You're probably looking for an <optgroup>:

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

Demo: http://jsfiddle.net/Zg9Mw/

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

If you do need to make regular <option>elements unselectable, you can give them the disabledattribute (it's a boolean attribute, so the value doesn't matter at all):

如果您确实需要使常规<option>元素不可选择，您可以为它们提供disabled属性（它是一个布尔属性，因此该值根本不重要）：

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

回答by user961627

I can see from your question the previous answers to mine are in fact what uyou are looking for, however just to note for future people coming to this StackOverflow question alike myself looking for a similar answer they can simple type 'Disabled' in an option.

我可以从您的问题中看到，我之前的答案实际上是您正在寻找的答案，但是请注意，未来的人们会像我自己一样在此 StackOverflow 问题中寻找类似的答案，他们可以在选项中简单地输入“已禁用”。

<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 Demo

JSFiddle 演示

回答by Travis J

jsFiddle Demo

jsFiddle Demo

You would use an <optgroup>

你会使用一个 <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>

回答by maximran

From :How to show disable HTML select option in by default?

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

This is another way of doing the same thing.

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

EDIT: (now you are able to run it here)

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

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

回答by druiz

There is a lot of option to make this happens, I recommend a plugin of jquery named Chosen:

有很多选择可以实现这一点，我推荐一个名为 Chosen 的 jquery 插件：

It will be like:

它会像：

<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>

Here is the link, https://harvesthq.github.io/chosen/

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