JavaScriptを使用して配列値を含むドロップダウンリストを作成する方法

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃概要＃＃＃

Web ページのフロントエンドを妨げずにドロップダウン リストのオプションを取得するには、配列を使用できます。配列と同様に、任意の数のオプションや値を保存できます。したがって、これらの値を select タグのコードの HTML 部分に直接入力する代わりに、配列から値をレンダリングできるため、ページのユーザー インターフェイス (UI) を妨げることなく、さらに値を簡単に追加できます。 ＃＃＃方法＃＃＃

これは非常に単純な手法であり、この手法を使用すると、オプションの値をリストに簡単にレンダリングできます。配列を使用すると、すべての String 型の値を 1 つの変数に格納できるため、スペースの複雑さが軽減されます。また、「

for

」、「

foreach

」、「

map()

」などの関数も多数あります。これらの関数を使用すると、配列を反復してレンダリングできます。価値。

＃＃＃文法＃＃＃

ドロップダウン リストを作成するための構文は - です。 リーリー ＃＃＃アルゴリズム＃＃＃ ステップ 1 −

HTML コード テンプレートを作成します。 HTML でドロップダウン リストを作成するには、select タグを使用してドロップダウン リストを作成し、option タグを使用してリストを作成します。

リーリー

ステップ 2

−

オプションを要素として含む配列を初期化し、空の String 型変数を作成します。 リーリー ステップ 3

−

次に、配列のマッピング メソッドを使用して、配列内の値をドロップダウン リストのオプション リストにマッピングします。連結手法を使用して、オプションをドロップダウン リストに接続します。 リーリー ステップ 4

−

これで、options 変数には配列内のオプションのリストが含まれます。配列からレンダリングされた値をドロップダウン リストに表示します。 リーリー ステップ 5

−

レンダリングされたすべてのオプションがドロップダウン リストに表示され、使用できるようになります。 ＃＃＃例＃＃＃ この例では、配列からオプションの値をレンダリングします。 map() 関数を使用して、オプション マーカーを使用して配列を反復処理し、それを String 型変数と連結しました。

innerHTML()

メソッドを使用して、select タグへの出力を表示します。 リーリー 下の画像は、上記の例の出力を示しています。これは、配列をオプションのリストとして HTML にレンダリングする方法を示すだけです。したがって、よりインタラクティブにしたい場合は、スタイルをより美しくするブートストラップ コンポーネントを使用できます。 ＃＃＃結論は＃＃＃ この方法は、ドロップダウン リスト オプションの値を表示する最良の方法です。この主な利点は、本質的に動的であるため、配列の操作が簡単になることです。つまり、配列のオプションを簡単に更新、追加、または削除できます。オプションのリストを作成したので、それは厳密に「Don't Reply Yourself (D-R-Y)」に従います。これはコンポーネントとして機能し、Web ページ上のどこにでもレンダリングできるため、一部のユーザー インターフェイス (UI) の開発のみが必要になります。

以上がJavaScriptを使用して配列値を含むドロップダウンリストを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。