在选择菜单中创建一些“不可选”选项

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

114466 次浏览
小开
最佳答案

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

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

我可以从你的问题看到以前的答案我的实际上是 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 演示

小开

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

小开

发信人: 如何在默认情况下显示禁用 HTML 选择选项？

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

编辑: (现在您可以在这里运行它)

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

小开

只需向您不想选择的选项标记添加“禁用”属性即可

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

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

<optgroup>也很好用。

小开

在众多的回应中。这取决于您想用第一个选项做什么。如果你想把它作为一种向导来展示的话。例如，选项1是“选择城市”，但您不希望用户选择它。

 <option style=\{\{display: "none"}}>Select City</option>

通过使用上面的代码，SelectCity 将是默认选项。但是用户将无法从选项中选择它。 使用“禁用”将不会呈现默认值，也不是可选的。 如果要有条件地禁用该选项，可以考虑使用 if 语句。


提交答案