web-dev-qa-db-ja.com

HTML <select>タグで選択可能な<optgroup>

オプショングループを選択可能にする方法はありますか？

<select>
   <optgroup value="0" label="Parent Tag">
      <option value="1">Child Tag</option>
      <option value="2">Child Tag</option>
   </optgroup>
</select>
htmlhtml-selectoptgroup
60
marcin_koss

できるとは思いませんが、cssで視覚的なスタイルを簡単に再現できるため、選択できるのはオプションだけなので、すべてが選択可能です。

.optionGroup {
    font-weight: bold;
    font-style: italic;
}
    
.optionChild {
    padding-left: 15px;
}
<select multiple="multiple">
    <option value="0" class="optionGroup">Parent Tag</option>
    <option value="1" class="optionChild">Child Tag</option>
    <option value="2" class="optionChild">Child Tag</option>
</select>

Multiple属性を使用すると、複数の行を選択できます（ctrlクリック）。必要でない場合は削除できます。すべてが選択可能になり、optiongroup要素と同じように見えることを示しました。

49
grifos

これは、プレーンHTMLでは不可能です。いくつかのブラウザー（mozilla）では、cssを使用して同様のことを実現できますが、この記事の執筆時点では、ブラウザーの大部分（webkit、et.al）はhtml select要素のスタイル設定をサポートしていません。

ただし、html-selectウィジェットを強化し、要求した機能などの欠落している機能を提供するように設計されたjavascriptライブラリがいくつかあります。いくつか例を挙げると：

9
Coleman

これがhtml標準でサポートされるまで、与えられたすべての答えは以下を含む問題があります：

  1. クラス属性はselectの子で許可されますが、要素にスタイルが適用されるかどうか/どのように適用されるかは、ブラウザーとブラウザーのバージョンによって大きく異なります。
  2. Nbspのプレフィックス。 select要素が選択されたオプションよりも狭い場合、視覚効果は心地よくならず、読み取り可能なテキストが右側に隠れてしまうという結果になります（以下の例を参照）。
  3. 適用するスタイルは、ブラウザのユーザーが慣れているスタイルに必ずしも合うとは限りません。太字と斜体はFirefoxですが、必ずしもすべてのブラウザーではありません。多くのブラウザは、optgroupが選択可能でないことを示すためにグレーを含むスタイルを適用します
  4. Select optgroupラベルの概念は、ユーザーが必ずしも期待するものではありません。

これにより、問題を回避する最善の方法は、サイト全体のすべての選択にUI-Selectableなどのライブラリを使用すること（一貫性のため）、ORの最初のオプションを使用する、明確な説明（「ALLスウェーデン車」など）を使用して、すべての子の選択を表すoptgroup：

<select multiple="multiple">
   <optgroup label="Parent">
      <option value="0" class="optionChild">ALL Children</option>
      <option value="1" class="optionChild">Child Tag 1</option>
      <option value="2" class="optionChild">Child Tag 2</option>
   </optgroup>
</select>

.my-select {
  width: 60px;
}
<select class="my-select">
  <option>Parent</option>
  <option selected="selected">&nbsp;&nbsp;&nbsp;Child</option>
</select>
4
Brent

少し異なるソリューション..

.optionGroup {
    font-weight: bold;

}
<select>
    <option value="0" class="optionGroup">Parent Tag</option>
    <option value="1">&nbsp;&nbsp;&nbsp;Child Tag1</option>
    <option value="2">&nbsp;&nbsp;&nbsp;Child Tag2</option>
</select>
2
Yura Gymenetskiy

@grifosの答えはWebKitブラウザではサポートされておらず、IE 11。

1つの提案は、Unordered/Orderedリストを使用し、CSSでスタイルを設定してから、JavaScript/jQueryで機能を追加することです。

私は過去にこれの素晴らしい実装を見てきました、それは本当に滑らかに見えることができます！

0
mgilberties

これにより、選択可能なoptgroupを含むドロップダウンリストの素朴な感覚が得られます。それを非常に単純に残しましたが、心のコンテンツに合わせてスタイルを設定できます。

.hide {
  display:none;
}
.show {
  display:block;
}
.selected.button {
  display:block;
  font-weight: bold;
}
button {
  text-align: left;
  min-width: 200px;
  margin-left: 10px;
  border: 0px;
  background: #eee;
  display: block;
}
#value_display {
  width: 210px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding-left: 8px;
}
</style>
<html>
<body>


<!-- Div is a display and also trigger for displaying dropdown -->
<div id="value_display" onclick="showOptions(this.value)">
  opt 0
</div>

<!-- setting height and doing overflow-y allows dropdown list with scrollbox -->
<div id="select_div" class="hide" style="height: 80px; overflow-y: scroll;">

<button class="selected button" onclick="select(this.id)" id="opt 0">opt 0</button>
<button onclick="select(this.id)" id="opt 0-1" style="padding-left: 15px">opt 0-1</button>
<button onclick="select(this.id)" id="opt 0-2" style="padding-left: 15px">opt 0-2</button>
<button onclick="select(this.id)" id="opt 0-3" style="padding-left: 15px">opt 0-3</button>
<button onclick="select(this.id)" id="opt 0-4" style="padding-left: 15px">opt 0-4</button>
<button class="" onclick="select(this.id)" id="opt 1">opt 1</button>
<button onclick="select(this.id)" id="opt 1-1" style="padding-left: 15px">opt 1-1</button>
<button onclick="select(this.id)" id="opt 1-2" style="padding-left: 15px">opt 1-2</button>
<button onclick="select(this.id)" id="opt 1-3" style="padding-left: 15px">opt 1-3</button>
<button onclick="select(this.id)" id="opt 1-4" style="padding-left: 15px">opt 1-4</button>

<script>

var showingOptions = false;
var showingID = document.getElementById('value_display').innerHTML;

function showOptions() {
 if(showingOptions) {
   document.getElementById('select_div').className = "hide";
   showingOptions = false;
 }
 else {
   document.getElementById('select_div').className = "show";
   showingOptions = true;
 }
}
function select(id){
  document.getElementById(id).className = 'selected button';
  document.getElementById(showingID).className = 'show';
  showingID = id;
  document.getElementById('value_display').innerHTML = id;
  document.getElementById('select_div').className = 'hide';
}

</script>
0
Steven Kaspar