データベースクエリを使用せずに、選択に基づいてドロップダウンを動的に設定するにはどうすればよいですか?

選択に基づいてドロップダウンを動的に設定する

あるドロップダウンの内容を別のドロップダウンでの選択に基づいて変更するというタスクに直面した場合、次のことを理解してください。この機能を JavaScript で実装する方法が重要です。データベース クエリが必要な状況とは異なり、このプロセスは AJAX を使用せずに簡素化できます。

これを支援するために、2 番目のドロップダウン (ドロップダウン B) ベースの値を設定する方法を示す、簡潔で効果的な JavaScript コード例を提供します。最初のドロップダウン (ドロップダウン A) で行われた選択に基づいて。このコードには、外部データの取得やデータベース クエリは含まれていません:

<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);
}</code>

このコードでは、ドロップダウン B に表示される値を含む 3 つの配列 (色、形状、名前) を定義しました。ドロップダウン A の対応する各オプション。

ユーザーがドロップダウン A からオプションを選択すると、configureDropDownLists 関数が呼び出されます。選択されたオプションに基づいて、関数はドロップダウン B の内容をクリアし、関連する配列から適切な値を再入力します。

HTML ドキュメントに 2 つのドロップダウンを作成し、onchange イベントを使用することで、このコードを実装できます。最初のドロップダウンのハンドラーを使用して、2 番目のドロップダウンを設定する関数をトリガーします。

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