JavaScript を使用してドロップダウンの内容を動的に設定するにはどうすればよいですか?

JavaScript による動的ドロップダウン作成

選択内容に基づいて 1 つのドロップダウン (B) の内容を設定する必要があるシナリオJavaScript を使用する別のドロップダウン (A) では、複雑な AJAX クエリは必要ありません。代わりに、次のコード スニペットを利用してこれを実現できます。

<code class="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 < colours.length; i++) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i < shapes.length; i++) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i < names.length; i++) {
        createOption(ddl2, names[i], names[i]);
      }
      break;
    default:
      ddl2.options.length = 0;
      break;
  }
}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}

このコードを利用するには、JavaScript ファイルにコードを含めて、configureDropDownLists 関数を最初のドロップダウンの onChange イベント ハンドラーとして登録します (A) :

<code class="html"><select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
  <option value="" selected>Select</option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

<select id="ddl2">
</select></code>

このコードは、スイッチケース ロジックを利用して ddl2 の内容を動的に決定し、最初のドロップダウン (ddl1) での選択に基づいて 2 番目のドロップダウン (ddl2) を設定する方法を示しています。

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