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

あるドロップダウンのオプションを、別のドロップダウンでの選択に基づいて動的に更新するタスクに直面した場合、データベース クエリなどの不必要な複雑さを避けるために不可欠です。 AJAX 呼び出しを必要とせずにこれを実現する、簡単な JavaScript ベースのソリューションを検討してみましょう。

このアプローチを説明するために、2 つのドロップダウン リストがあるシナリオを考えてみましょう。ドロップダウン A には、「色」、「」などのオプションがあります。 「形状」、「名前」、およびドロップダウン B。ドロップダウン A での選択に基づいて、ドロップダウン B にオプションを設定したいと考えています。

サンプル コード

次の JavaScript 関数は、次の方法を示しています。この機能を実現するには:

function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i 
HTML マークアップ
次の HTML マークアップには 2 つのドロップダウン リストが含まれています:
ColoursShapesNames
使用法
この機能を使用するには、configureDropDownLists 関数を呼び出して、最初のドロップダウン (ddl1) と 2 番目のドロップダウン (ddl2) を渡すだけです。引数として。この関数は、ドロップダウン A で行われた選択に基づいてドロップダウン B の動的な入力を処理します。
このコード スニペットは完全に機能するソリューションを示しており、JavaScript を使用して別のドロップダウンで行われた選択に基づいて 1 つのドロップダウンに動的に入力できるようになります。データベース呼び出しや AJAX リクエストは必要ありません。