選択メニューのいくつかのオプションを「選択不可」

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をクリックすることはできますが、選択されないため、ユーザーはその下のブランチの1つを選択する必要がありますか？

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

jsFiddle Demo

あなたは私がuyouが探しているものを実際にしていると私はしかし、ちょうど未来の人々のために注意することは、あなたの質問から、以前の回答を見ることができます<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 3

を使用しますこの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

Answer 4

これが起こるようにするオプションがたくさんありますが、私は、選択された名前の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/