68

我有一个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不被选中，所以用户被迫选择下面的分支之一？

4

7 回答 7

169

您可能正在寻找<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-26T09:40:43.103 回答
34

我可以从你的问题中看到，我之前的答案实际上是你正在寻找的，但是只是为了提醒未来的人来这个 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 演示

于 2014-06-14T15:43:44.330 回答
15

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

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

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

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

于 2018-05-31T09:01:10.453 回答
11

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-26T09:42:25.220 回答
0

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

<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>
于 2021-05-21T11:56:42.907 回答
0

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

于 2016-11-24T17:04:19.813 回答
0

实际上，您可以在元素上同时使用selected和disabled属性<option>，以防您想要一种内联标签来提供基本说明而不让用户选择它。

<optgroup>效果也很好。

于 2021-08-30T16:18:01.983 回答