プルダウンメニューとは？

プルダウンメニューは、GUIを使ったOSの操作画面もしくはWebページの画面上で項目を選択する方式の一つで、複数の選択肢の中から1つだけ選択できるものを指します。タイトル上にマウスカーソルをあわせてボタンをクリックすることで、画面上の上から下へ引き出されるように選択項目の一覧が表示されることから、このように呼ばれます。ドロップダウンメニューとも呼ばれます。

プルダウンメニューの特徴

プルダウンメニューは、以下のような特徴があります。

特徴	説明
省スペース性	選択肢を隠した状態で表示できるため、画面上のスペースを有効活用できます。
操作性	直感的に操作できるため、ユーザーにとって使いやすいUIです。
視認性	選択肢が一覧で表示されるため、ユーザーは簡単に選択できます。

HTMLでのプルダウンメニューの実装方法

HTMLでは、

<select>

タグと

<option>

タグを使ってプルダウンメニューを実装します。

基本的なコード例

<label for="fruit">好きな果物を選んでください：</label>
<select id="fruit" name="fruit">
  <option value="">選択してください</option>
  <option value="apple">りんご</option>
  <option value="orange">みかん</option>
  <option value="grape">ぶどう</option>
</select>

上記コードを実行すると、以下のようなプルダウンメニューが表示されます。

好きな果物を選んでください：

参考資料

よくある質問

Q1: プルダウンメニューの項目を増やすにはどうすればよいですか？

A1:

<select>

タグ内に

<option>

タグを追加することで、項目を増やすことができます。

Q2: プルダウンメニューで初期選択を設定するにはどうすればよいですか？

A2:

<option>

タグの

selected

属性を使用することで、初期選択を設定できます。例えば、"みかん"を初期選択にする場合は、以下のように記述します。

<option value="orange" selected>みかん</option>

Q3: プルダウンメニューの選択された値を取得するにはどうすればよいですか？

A3: JavaScriptを使用することで、プルダウンメニューで選択された値を取得できます。


<script>
const fruitSelect = document.getElementById('fruit');
fruitSelect.addEventListener('change', function() {
  const selectedFruit = fruitSelect.value;
  console.log(selectedFruit); 
});
</script>

このコードでは、プルダウンメニューの選択が変更されるたびに、選択された果物の値がコンソールに表示されます。

その他の参考記事:ドロップダウンメニュー jquery