JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでドロップダウンリストの複数選択を有効にする方法【multiple属性の使い方】

ドロップダウンリスト（<select>要素）で複数のオプションを選択できるようにするには、multiple属性（プロパティ）を使用します。この設定を有効にすると、Ctrlキー（Macの場合はCommandキー）を押しながら項目をクリックすることで、複数のオプションを同時に選択できるようになります。

実装例：ボタンクリックで複数選択モードに切り替える

以下のサンプルコードでは、ボタンをクリックするとJavaScriptによってselect要素のmultipleプロパティがtrueに設定され、リストが複数選択可能な状態に切り替わります。

<!DOCTYPE html>
<html>
<body>
  <form id="myForm">
    <select id="mySelect">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
    <input type="button" onclick="multipleFunc()" value="複数を選択する">
  </form>
  <p>Ctrlキー（MacはCommandキー）を押しながら操作すると、複数のオプションを一度に選択できます。</p>
  <script>
    function multipleFunc() {
      document.getElementById("mySelect").multiple = true;
    }
  </script>
</body>
</html>

ポイントの解説

  • multipleプロパティの動的変更： document.getElementById("mySelect").multiple = true; を実行した瞬間から、そのリストは複数選択モードになります。ユーザーの操作や条件に応じて後から切り替えたい場合に便利です。
  • 表示形式の変化に注意： multipleを有効にすると、通常のプルダウン形式ではなくリストボックス形式で表示されるため、デザインやレイアウトへの影響を考慮しておきましょう。
  • HTMLで最初から指定する方法： 初期状態から複数選択を許可したい場合は、JavaScriptを使わずに <select multiple> のように属性を直接記述することも可能です。
  • size属性との組み合わせ： size属性を指定すると、画面に同時に表示される選択肢の行数を調整でき、ユーザーが選択肢を見やすくなります。
  1. JavaScriptでリストアイテムを閉じる（非表示にする）方法を解説

    Webアプリケーション開発では、ToDoリストや通知一覧など、ユーザーの操作によってリスト項目を削除・非表示にしたいケースが数多くあります。本記事では、JavaScriptを使ってリストアイテムに「×」ボタンを実装し、クリックするとその項目を非表示にする方法を、動作するサンプルコード付きで詳しく解説します。 実装の仕組み この機能は、HTML・CSS・JavaScriptの3つを組み合わせて実現します。大まかな流れは以下のとおりです。 CSSで各リスト項目（<li>）の右端に「×」ボタンを絶対配置する querySelectorAll()でページ内のすべての閉じるボタン（.clo

  2. JavaScriptでドロップダウン（select要素）の選択肢の数を取得する方法

    はじめにWeb開発において、ドロップダウンリスト（<select>要素）に含まれる選択肢（<option>）の数を取得したい場面はよくあります。JavaScriptとjQueryを使えば、わずか1行のコードで簡単に実現できます。例として、次のようなドロップダウンリストがあるとします。<select id=lengthListOfOptionDemo>    <option>John</option>    <option>Mike</option> &