【簡単操作】HTMLでドロップダウンリストをマスターする5つのステップ

📋 対応バージョン

HTML HTML5

CSS CSS2.1+

JavaScript ES5+

Chrome 1+

Firefox 1+

Safari 1+

Edge 12+

IE 9+

完全対応

はじめに
ドロップダウンリストとは
ドロップダウンリストの基本的な作り方
ドロップダウンリストの使い方
JavaScriptでの値取得方法
ドロップダウンリストの注意点
ドロップダウンリストのカスタマイズ方法
サンプルコードを使った応用例
まとめ

はじめに

HTMLドロップダウンリストを知らない方や、これから学びたいと考えている方に向けて、この記事ではドロップダウンリストの作り方、使い方、JavaScriptでの操作方法、注意点、カスタマイズ方法を詳しく解説していきます。

ドロップダウンリストとは

ドロップダウンリストは、ウェブページ上で選択肢から1つを選ぶ際に使用するUI要素です。ユーザーは、リストから選択肢をクリックして選ぶことができます。

HTMLでは、<select>要素と<option>要素を使ってドロップダウンリストを作成することが可能です。

ドロップダウンリストの基本的な作り方

HTMLの<select>要素と<option>要素を使って、ドロップダウンリストを作成してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ドロップダウンリストのサンプル</title>
</head>
<body>
  <form>
    <select>
      <option value="option1">選択肢1</option>
      <option value="option2">選択肢2</option>
      <option value="option3">選択肢3</option>
    </select>
  </form>
</body>
</html>

ドロップダウンリストの使い方

ドロップダウンリストは、フォーム内で選択肢から1つを選ぶ際に便利です。例えば、国や都道府県を選ぶ際に活用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>都道府県を選択するドロップダウンリスト</title>
</head>
<body>
  <form>
    <select>
      <option value="tokyo">東京都</option>
      <option value="kanagawa">神奈川県</option>
      <option value="osaka">大阪府</option>
      <!-- 他の都道府県も追加してください -->
    </select>
  </form>
</body>
</html>

JavaScriptでの値取得方法

ドロップダウンリストで選択された値をJavaScriptで取得する方法を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ドロップダウンリストで選択された値を取得する</title>
  <script>
    function getSelectedValue() {
      var selectElement = document.getElementById("prefectures");
      var selectedValue = selectElement.options[selectElement.selectedIndex].value;
      alert("選択された都道府県: " + selectedValue);
    }
  </script>
</head>
<body>
  <form>
    <select id="prefectures">
      <option value="tokyo">東京都</option>
      <option value="kanagawa">神奈川県</option>
      <option value="osaka">大阪府</option>
      <!-- 他の都道府県も追加してください -->
    </select>
    <button type="button" onclick="getSelectedValue()">選択された都道府県を取得</button>
  </form>
</body>
</html>

ドロップダウンリストの注意点

ドロップダウンリストを作成する際には、いくつか注意点があります。

<select>要素には、適切なname属性を設定しておきましょう。これにより、フォームデータが送信される際に、どのドロップダウンリストから送信されたデータかを判別できます。
<option>要素には、value属性を設定しておくことが重要です。選択肢が選ばれたときに、送信される値を指定できます。
必要に応じて、複数の選択肢を同時に選択できるように、<select>要素にmultiple属性を追加することも可能です。

ドロップダウンリストのカスタマイズ方法

ドロップダウンリストの見た目や挙動をカスタマイズする方法を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カスタマイズされたドロップダウンリスト</title>
  <style>
    select {
      width: 200px;
      height: 40px;
      font-size: 18px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <form>
    <select>
      <option value="option1">選択肢1</option>
      <option value="option2">選択肢2</option>
      <option value="option3">選択肢3</option>
    </select>
  </form>
</body>
</html>

サンプルコードを使った応用例

下記のサンプルコードでは、都道府県のドロップダウンリストを使って、選択された都道府県の天気情報を取得するアプリケーションを作成しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>都道府県の天気情報を表示するアプリケーション</title>
  <script>
    function showWeather() {
      var selectElement = document.getElementById("prefectures");
      var selectedValue = selectElement.options[selectElement.selectedIndex].value;
      // ここで、選択された都道府県に基づいて天気情報を取得する処理を実装します
      alert("選択された都道府県の天気情報を表示します: " + selectedValue);
    }
  </script>
</head>
<body>
  <form>
    <select id="prefectures">
      <option value="tokyo">東京都</option>
      <option value="kanagawa">神奈川県</option>
      <option value="osaka">大阪府</option>
      <!-- 他の都道府県も追加してください -->
    </select>
    <button type="button" onclick="showWeather()">天気情報を表示</button>
  </form>
</body>
</html>

このサンプルコードでは、選択された都道府県に基づいて天気情報を取得する処理を実装する部分が省略されています。実際には、天気情報を提供するAPIと連携して、選択された都道府県の天気情報を表示するように実装することが可能です。