在选择菜单中设置一些选项“不可选”

我有一个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但它不会被选中，所以用户被迫选择其中一个分支？

来源

2013-06-26 user961627

108

你可能会寻找一个<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>

来源

2013-06-26 09:40:43 Blender

+27

哇！我一直在做网络开发10年，我不知道有一个名为“optgroup”的元素！谢谢！ – user961627

upvote教我新的东西（经过20年的HTML编码）:) –

绝对的天才！ –

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>

来源

2013-06-26 09:42:25

我可以从你的问题看前面的回答我的是其实什么uyou正在寻找，但只是要注意为将来的人来到这个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

来源

2014-06-14 15:43:44

请注意，“disabled”实际上并没有值，它的存在是使元素“disabled”的原因。 'disabled =“”''''disabled =“false”'，只是'disabled'都具有相同的效果。 – Blender

有很多的选择，使这种情况发生，我建议命名的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/

来源

2016-11-24 17:04:19 druiz

在选择菜单中设置一些选项“不可选”

回答

相关问题