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 に答える
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

これを実現するためのオプションはたくさんあります。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 に答える
0

選択したくないオプションタグに disable 属性を追加するだけです

<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 に答える