optgroup タグと JavaScript

HTML Elements: optgroup タグ徹底解説

概要

• 役割: 選択肢をカテゴリー等で分類し、見やすく整理する
• 使用例: 国名リスト、商品カテゴリー、サイズ等
• 効果: ユーザーインターフェースの向上、利便性の向上

基本的な使い方

<select name="country">
  <optgroup label="アジア">
    <option value="jp">日本</option>
    <option value="cn">中国</option>
    <option value="kr">韓国</option>
  </optgroup>
  <optgroup label="ヨーロッパ">
    <option value="fr">フランス</option>
    <option value="de">ドイツ</option>
    <option value="it">イタリア</option>
  </optgroup>
</select>

上記の例では、select タグ内で optgroup タグを使い、選択肢を "アジア" と "ヨーロッパ" というグループに分類しています。

属性

• label: グループのラベルテキストを指定
• disabled: グループ内のすべての選択肢を無効化
• title: グループに関する補足情報を表示

詳細

• 入れ子: optgroup タグは入れ子にできません。
• ブラウザ: すべての主要なブラウザでサポートされています。
• アクセシビリティ: 視覚障碍者向けスクリーンリーダーなどで読み上げられるように、label 属性を適切に使用することが重要です。

応用例

• 複数階層のグループ分け
• 画像付きの選択肢
• 検索機能付きの選択肢

optgroup タグは、select タグ内の選択肢を分類し、ユーザーインターフェースを向上させるための便利な要素です。

補足

• 上記は基本的な解説です。より詳細な情報は、上記の参考情報をご覧ください。
• 本日の日付は 2024 年 3 月 30 日です。
• 質問や不明点があれば、お気軽にお問い合わせください。

optgroup タグのサンプルコード

複数階層のグループ分け

<select name="category">
  <optgroup label="衣類">
    <optgroup label="トップス">
      <option value="t-shirt">Tシャツ</option>
      <option value="blouse">ブラウス</option>
    </optgroup>
    <optgroup label="ボトムス">
      <option value="jeans">ジーンズ</option>
      <option value="skirt">スカート</option>
    </optgroup>
  </optgroup>
  <optgroup label="家具">
    <option value="chair">椅子</option>
    <option value="table">テーブル</option>
  </optgroup>
</select>

画像付きの選択肢

<select name="avatar">
  <optgroup label="動物">
    <option value="cat" data-image="cat.png">猫</option>
    <option value="dog" data-image="dog.png">犬</option>
    <option value="bird" data-image="bird.png">鳥</option>
  </optgroup>
  <optgroup label="食べ物">
    <option value="apple" data-image="apple.png">りんご</option>
    <option value="banana" data-image="banana.png">バナナ</option>
    <option value="orange" data-image="orange.png">オレンジ</option>
  </optgroup>
</select>

上記のコードでは、data-image 属性を使用して、選択肢に画像を関連付けています。ブラウザによっては、画像が選択肢の横に表示されます。

検索機能付きの選択肢

<select name="country" id="country">
  <optgroup label="アジア">
    <option value="jp">日本</option>
    <option value="cn">中国</option>
    <option value="kr">韓国</option>
  </optgroup>
  <optgroup label="ヨーロッパ">
    <option value="fr">フランス</option>
    <option value="de">ドイツ</option>
    <option value="it">イタリア</option>
  </optgroup>
</select>

<script>
  const countrySelect = document.getElementById('country');

  countrySelect.addEventListener('input', (event) => {
    const searchTerm = event.target.value.toLowerCase();
    const options = countrySelect.querySelectorAll('option');

    for (const option of options) {
      const optionText = option.textContent.toLowerCase();
      option.hidden = !optionText.includes(searchTerm);
    }
  });
</script>

上記のコードでは、JavaScriptを使用して、select タグ内に検索機能を実装しています。ユーザーが入力した文字列に基づいて、該当する選択肢のみを表示します。

上記以外にも、optgroup タグを使用して、さまざまなカスタマイズが可能です。

• CSS を使用して、グループの見栄えを調整できます。
• JavaScript を使用して、グループの動作を拡張できます。

何か質問があれば、お気軽にお問い合わせください。

HTML select タグで選択肢をグループ化する他の方法

JavaScript

JavaScript を使用して、option タグを動的に追加、削除、変更することで、グループ分けを実現できます。

<select id="my-select"></select>

<script>
  const select = document.getElementById('my-select');

  const groups = [
    {
      label: 'アジア',
      options: [
        { value: 'jp', text: '日本' },
        { value: 'cn', text: '中国' },
        { value: 'kr', text: '韓国' },
      ],
    },
    {
      label: 'ヨーロッパ',
      options: [
        { value: 'fr', text: 'フランス' },
        { value: 'de', text: 'ドイツ' },
        { value: 'it', text: 'イタリア' },
      ],
    },
  ];

  for (const group of groups) {
    const optgroup = document.createElement('optgroup');
    optgroup.label = group.label;

    for (const option of group.options) {
      const opt = document.createElement('option');
      opt.value = option.value;
      opt.textContent = option.text;

      optgroup.appendChild(opt);
    }

    select.appendChild(optgroup);
  }
</script>

上記のコードでは、JavaScriptを使用して、"アジア" と "ヨーロッパ" という2つのグループを作成し、それぞれに選択肢を追加しています。

CSS

CSS を使用して、option タグのスタイルを変更することで、グループ分けを視覚的に表現できます。

<select>
  <option value="jp">日本</option>
  <option value="cn">中国</option>
  <option value="kr">韓国</option>
  <option value="fr">フランス</option>
  <option value="de">ドイツ</option>
  <option value="it">イタリア</option>
</select>

option {
  padding: 5px;
}

optgroup {
  font-weight: bold;
}

optgroup option {
  margin-left: 10px;
}

optgroup:first-child option {
  margin-top: 10px;
}

上記のコードでは、CSSを使用して、optgroup タグ内の option タグに余白を追加し、グループ分けを視覚的に表現しています。

サーバーサイド処理

サーバーサイドで処理を行い、select タグのオプションをグループ化した HTML を生成する方法もあります。

例：PHP

<?php

$groups = [
  'アジア' => ['jp', 'cn', 'kr'],
  'ヨーロッパ' => ['fr', 'de', 'it'],
];

?>

<select>
  <?php foreach ($groups as $label => $countries) : ?>
    <optgroup label="<?php echo $label; ?>">
      <?php foreach ($countries as $country) : ?>
        <option value="<?php echo $country; ?>"><?php echo $country; ?></option>
      <?php endforeach; ?>
    </optgroup>
  <?php endforeach; ?>
</select>

上記のコードでは、PHPを使用して、"アジア" と "ヨーロッパ" という2つのグループを作成し、それぞれに選択肢を追加しています。

• JavaScript: 動的なグループ分けや複雑な処理に適しています。
• CSS: 視覚的なグループ分けに適しています。
• サーバーサイド処理: 静的なグループ分けや大量のデータ処理に適しています。

何か質問があれば、お気軽にお問い合わせください。