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

JavaScriptでドロップダウンリストの全オプションを取得・表示する方法

ドロップダウンリスト（セレクトボックス）に含まれるすべてのオプションを表示するには、optionsプロパティを使用します。このプロパティはselect要素内の全option要素をコレクションとして返すため、lengthプロパティでオプションの総数を取得し、ループ処理によって各項目を順番に取り出すことができます。

サンプルコード

以下のコードでは、ボタンをクリックするとドロップダウンリストからすべてのオプションを取得し、画面に表示します。

<!DOCTYPE html>
<html>
   <body>
      <form id="myForm">
         <select id="selectNow">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
         </select>
         <input type="button" onclick="display()" value="Click">
      </form>
      <p>Click the button to get all the options</p>
      <script>
         function display() {
            var a, i, options;
            a = document.getElementById("selectNow");
            options = "";
            for (i = 0; i < a.length; i++) {
               options = options + "<br> " + a.options[i].text;
            }
            document.write("DropDown Options: "+options);
         }
      </script>
   </body>
</html>

コードのポイント

  • document.getElementById()で対象となるselect要素を取得します。
  • a.length（またはa.options.length）でオプションの総数を取得し、forループで繰り返し処理を行います。
  • a.options[i].textでi番目のオプションの表示テキストを取り出せます。

実行結果

ボタンをクリックすると、次のようにすべてのオプションが表示されます。

DropDown Options:
One
Two
Three

なお、document.write()は現在非推奨のAPIです。実際の開発では、innerHTMLやtextContentを使用してページ上の特定の要素へ出力する方法が推奨されます。

  1. JavaScriptでフィルターリスト（検索絞り込み機能）を作成する方法

    JavaScriptを使えば、検索ボックスに入力したキーワードに応じてリスト項目をリアルタイムに絞り込む「フィルターリスト」を簡単に実装できます。以下は、HTML・CSS・JavaScriptを組み合わせた基本的なサンプルコードです。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * {

  2. JavaScriptでリストアイテムを閉じる（非表示にする）方法を解説

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