web-dev-qa-db-ja.com

選択メニューの一部のオプションを「選択不可」にします

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

htmlhtml-select
53
user961627

あなたはおそらく <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>
135
Blender

あなたの質問から、私の以前の答えが実際にあなたが探しているものであることがわかりますが、この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

19
user2199660

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>
11
Travis J

From： デフォルトでHTML選択オプションを無効にする方法は？

これは同じことを行う別の方法です。

編集：（ここで実行できます）

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

これを実現するための多くのオプションがあります。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/

0
druiz