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'in一个选项。

<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

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

来自：How to show disable HTML select option in by default?

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

编辑:(现在你可以在这里运行了）

＆＃13;

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

＆＃13;

Answer 5

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

Answer 6

只需将禁用属性添加到您不想选择的选项标签

<select>
  <option disabled> CITY 1 </option>
  <option> City 1 branch A </option>
  <option> City 1 branch B </option>
  <option> City 1 branch C </option>
  <option disabled> CITY 2 </option>
  <option> City 2 branch A </option>
  <option> City 2 branch B </option>
</select>

在选择菜单中选择“无法选择”的选项

6 个答案: