HTMLプルダウンの初期値設定を徹底解説！最強のカスタマイズ法8選

はじめに
●HTMLプルダウンメニューの基本
●注意点
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、HTMLのプルダウンメニューの初期値設定やカスタマイズができるようになります。

初心者の方でもわかりやすく説明していますので、ぜひチャレンジしてみてください。

●HTMLプルダウンメニューの基本

プルダウンメニューは、<select>タグを使って作成します。

下記のサンプルコードは、プルダウンメニューの基本構造を表しています。

○サンプルコード1：プルダウンメニューの基本構造

<select>
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
  <option value="option3">オプション3</option>
</select>

初期値の設定方法プルダウンメニューの初期値を設定するには、<option>タグに”selected”属性を追加します。

下記のサンプルコードでは、”オプション2″が初期値として設定されています。

○サンプルコード2：初期値の設定方法

<select>
  <option value="option1">オプション1</option>
  <option value="option2" selected>オプション2</option>
  <option value="option3">オプション3</option>
</select>

使い方と対処法プルダウンメニューの値を取得したり、選択項目を変更する方法を解説します。

○サンプルコード3：プルダウンメニューの値取得

JavaScriptを使用して、プルダウンメニューの選択された値を取得できます。

<select id="mySelect">
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
  <option value="option3">オプション3</option>
</select>

<script>
  const selectElement = document.getElementById("mySelect");
  selectElement.addEventListener("change", function () {
    const selectedValue = selectElement.value;
    console.log("選択された値:", selectedValue);
  });
</script>

○サンプルコード4：プルダウンメニューの選択項目変更

JavaScriptを使用して、プルダウンメニューの選択項目を変更できます。

<select id="mySelect">
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
  <option value="option3">オプション3</option>
</select>

<script>
  const selectElement = document.getElementById("mySelect");
  selectElement.value = "option2"; // オプション2を選択状態にする
</script>

●注意点

同じ<select>タグ内で複数の<option>タグに”selected”属性を指定しないでください。
不具合が発生する可能性があります。
プルダウンメニュー内で選択肢が非常に多い場合は、ユーザビリティを考慮して他のUI（例：検索機能付きプルダウン）を検討してください。

●カスタマイズ方法

プルダウンメニューの見た目や動作をカスタマイズする方法を紹介します。

○サンプルコード5：プルダウンメニューのスタイル変更

CSSを使用して、プルダウンメニューのスタイルを変更できます。

<select id="mySelect" class="custom-select">
  <option value="option1">オプション1</option>
  <option value="option2">オプション2</option>
  <option value="option3">オプション3</option>
</select>

<style>
  .custom-select {
    font-size: 18px;
    color: blue;
    border: 2px solid green;
  }
</style>

○サンプルコード6：プルダウンメニューのグループ化

<optgroup>タグを使用して、プルダウンメニュー内のオプションをグループ化できます。

<select>
  <optgroup label="グループ1">
    <option value="option1">オプション1</option>
    <option value="option2">オプション2</option>
  </optgroup>
  <optgroup label="グループ2">
    <option value="option3">オプション3</option>
    <option value="option4">オプション4</option>
  </optgroup>
</select>

応用例とサンプルコードプルダウンメニューの応用例として、連動プルダウンメニューやオプションの非表示・無効化を紹介します。

○サンプルコード7：連動プルダウンメニュー

2つのプルダウンメニューが連動して動作する例です。

1つ目のプルダウンメニューの選択に応じて、2つ目のプルダウンメニューの選択肢が変わります。

<select id="select1">
  <option value="group1">グループ1</option>
  <option value="group2">グループ2</option>
</select>

<select id="select2">
</select>

<script>
  const select1 = document.getElementById("select1");
  const select2 = document.getElementById("select2");

  const options = {
    group1: ["オプション1", "オプション2"],
    group2: ["オプション3", "オプション4"]
  };

  function updateSelect2() {
    const selectedGroup = select1.value;
    const groupOptions = options[selectedGroup];

    select2.innerHTML = "";

    groupOptions.forEach(option => {
      const optionElement = document.createElement("option");
      optionElement.value = option;
      optionElement.textContent = option;
      select2.appendChild(optionElement);
    });
  }

  select1.addEventListener("change", updateSelect2);
  updateSelect2();
</script>

○サンプルコード8：オプションの非表示・無効化

特定の条件下で、プルダウンメニュー内のオプションを非表示または無効化する例です。

<select>
  <option value="option1">オプション1</option>
  <option value="option2" disabled>オプション2</option>
<option value="option3" style="display:none;">オプション3 (非表示)</option>
  <option value="option4">オプション4</option>
</select>

上記のサンプルコードでは、”オプション2″が無効化され、”オプション3″が非表示になっています。

無効化されたオプションは選択できなくなりますが、非表示になったオプションはプルダウンメニューから完全に消えます。