optgroupの概要
optgroup要素は、select要素内でoption要素のグループを作成することができます。
optgroup要素は、select要素内でoption要素のグループを作成することができます。optgroupに使える属性
属性とは<optgroup> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。
よく使うグローバル属性
| id | 概要 | 要素に対してID固有の識別名を付けることができます。 |
|---|---|---|
| 属性の値 | 英字から始まる英数字 | |
| class | 概要 | 要素に対して分類名を付けることができます。 |
| 属性の値 | 英字から始まる英数字 | |
| style | 概要 | 要素に対して直接スタイルを指定することができます。 |
| 属性の値 | スタイルシートのコード |
optgroupに使える属性
| disabled | 概要 | 要素に対してdisabled属性が存在が指定されている場合、要素をクリックすることができなくなります。 |
|---|---|---|
| 属性の値 | なし | |
| label | 概要 | 選択肢名を指定できます。label属性が要素に存在する場合、要素で囲ったテキストよりも優先されます。 |
| 属性の値 | 表示したいテキスト |
スポンサードサーチ
<optgroup>の使い方
基本の使いかた
<label for="country-select">あなたの出身地は？</label>
<select id="country-select">
<option selected>都道府県を選択！</option>
<optgroup label="北海道地方">
<option>北海道</option>
<optgroup label="東北地方">
<option>青森県</option>
<option>岩手県</option>
<option>宮城県</option>
<option>秋田県</option>
<option>山形県</option>
<option>福島県</option>
<option>茨城県</option>
</optgroup>
<optgroup label="関東地方">
<option>栃木県</option>
<option>群馬県</option>
<option>埼玉県</option>
<option>千葉県</option>
<option>東京都</option>
<option>神奈川県</option>
</optgroup>
<optgroup label="中部地方">
<option>新潟県</option>
<option>富山県</option>
<option>石川県</option>
<option>福井県</option>
<option>山梨県</option>
<option>長野県</option>
<option>岐阜県</option>
<option>静岡県</option>
<option>愛知県</option>
</optgroup>
<optgroup label="近畿地方">
<option>三重県</option>
<option>滋賀県</option>
<option>京都府</option>
<option>大阪府</option>
<option>兵庫県</option>
<option>奈良県</option>
<option>和歌山県</option>
</optgroup>
<optgroup label="中国地方">
<option>鳥取県</option>
<option>島根県</option>
<option>岡山県</option>
<option>広島県</option>
<option>山口県</option>
</optgroup>
<optgroup label="四国地方">
<option>徳島県</option>
<option>香川県</option>
<option>愛媛県</option>
<option>高知県</option>
</optgroup>
<optgroup label="九州・沖縄地方">
<option>福岡県</option>
<option>佐賀県</option>
<option>長崎県</option>
<option>熊本県</option>
<option>大分県</option>
<option>宮崎県</option>
<option>鹿児島県</option>
<option>沖縄県</option>
</optgroup>1
<label for="country-select">あなたの出身地は？</label>2
<select id="country-select">3
<option selected>都道府県を選択！</option>4
<optgroup label="北海道地方">5
<option>北海道</option>6
<optgroup label="東北地方">7
<option>青森県</option>8
<option>岩手県</option>9
<option>宮城県</option>10
<option>秋田県</option>11
<option>山形県</option>12
<option>福島県</option>13
<option>茨城県</option>14
</optgroup>15
<optgroup label="関東地方">16
<option>栃木県</option>17
<option>群馬県</option>18
<option>埼玉県</option>19
<option>千葉県</option>20
<option>東京都</option>21
<option>神奈川県</option>22
</optgroup>23
<optgroup label="中部地方">24
<option>新潟県</option>25
<option>富山県</option>26
<option>石川県</option>27
<option>福井県</option>28
<option>山梨県</option>29
<option>長野県</option>30
<option>岐阜県</option>31
<option>静岡県</option>32
<option>愛知県</option>33
</optgroup>34
<optgroup label="近畿地方">35
<option>三重県</option>36
<option>滋賀県</option>37
<option>京都府</option>38
<option>大阪府</option>39
<option>兵庫県</option>40
<option>奈良県</option>41
<option>和歌山県</option>42
</optgroup>43
<optgroup label="中国地方">44
<option>鳥取県</option>45
<option>島根県</option>46
<option>岡山県</option>47
<option>広島県</option>48
<option>山口県</option>49
</optgroup>50
<optgroup label="四国地方">51
<option>徳島県</option>52
<option>香川県</option>53
<option>愛媛県</option>54
<option>高知県</option>55
</optgroup>56
<optgroup label="九州・沖縄地方">57
<option>福岡県</option>58
<option>佐賀県</option>59
<option>長崎県</option>60
<option>熊本県</option>61
<option>大分県</option>62
<option>宮崎県</option>63
<option>鹿児島県</option>64
<option>沖縄県</option>65
</optgroup>ブラウザ対応状況
| ブラウザの対応（PC) | |
|---|---|
| Chrome | あり |
| Safari | あり |
| Internet Explorer | あり |
| Edge | あり |
| Firefox | あり |
| Opera | あり |
| ブラウザの対応（SP) | |
| Chrome | あり |
| Safari | あり |
| Samsung Internet | あり |