JavaScript を使用して、別のドロップダウン リストの選択に基づいて 1 つのドロップダウン リストを設定するにはどうすればよいですか?

別のドロップダウンの選択に基づいて 1 つのドロップダウンを設定する

ドロップダウン リストを使用する場合、多くの場合、1 つのドロップダウン ベースの内容を変更する必要があります。別の選択について。 JavaScript では、データベース クエリを必要とせずにこれを実現できます。その方法の例を次に示します。

提供されたコードは 2 つの関数に分割されています。

1. configureDropDownLists(ddl1, ddl2): この関数は 2 つの関数を受け取ります。引数は、リンクされる 2 つのドロップダウン リストです。最初のドロップダウン (ddl1) の値を使用して、2 番目のドロップダウン (ddl2) に設定するオプションを決定します。
2. createOption(ddl, text, value): このヘルパー関数は、ドロップダウン リストのオプション要素を取得し、それをドロップダウンのオプション コレクションに追加します。

サンプル HTML コードには、ddl1 と ddl2 の 2 つのドロップダウン リストがあります。ユーザーが ddl1 ドロップダウン リストのオプションを選択すると、onchange イベントがトリガーされ、configureDropDownLists() 関数が呼び出されます。

configureDropDownLists() 関数は、まず ddl2 からオプションをクリアし、次に、次のオプションに基づいて新しいオプションを追加します。 ddl1 で選択された値。たとえば、ユーザーが ddl1 で "Colors" を選択すると、関数は ddl2 に "Black"、"White"、"Blue" などの色のオプションを設定します。

提供されたコードに従うことで、次のことが簡単に行えます。複雑なデータベース クエリを必要とせずに、別のドロップダウンでの選択に基づいて 1 つのドロップダウンを設定します。

以上がJavaScript を使用して、別のドロップダウン リストの選択に基づいて 1 つのドロップダウン リストを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。