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

複数のドロップダウンを持つフォームを開発する場合、別の場所で選択したもの。これにより、選択肢が絞り込まれ、データ入力がより効率的になり、よりユーザー フレンドリーなエクスペリエンスが可能になります。

この機能を実現するアプローチの 1 つは、JavaScript を使用して依存関係のあるドロップダウンのコンテンツを動的に更新することです。以下は、別のドロップダウン (A) での選択に基づいて 1 つのドロップダウン (B) を設定する方法を示す例です。 var color = ['黒', '白', '青']; var 形状 = ['正方形', '円', '三角形']; var names = ['ジョン', 'デビッド', 'サラ']; スイッチ (ddl1.value) { ケース「色」: ddl2.options.length = 0; for (i = 0; i

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 次に、switch ステートメントを使用して、ddl1 で行われた選択を処理します。 ddl1 の値に応じて、ddl2 のオプションをクリアし、適切なオプションを設定します。 createOption 関数は、各オプションを作成して ddl2 に追加するために使用されます。
HTML では、2 つのドロップダウンを定義する必要があります:

  オプション>
  カラー
  シェイプ
  名前
選択>


ユーザーが ddl1 のオプションを選択すると、onchange イベントによって configureDropDownLists 関数がトリガーされ、それに応じて ddl2 のオプションが更新されます。このアプローチは、別のドロップダウンでの選択に基づいて 1 つのドロップダウンにデータを入力する便利な方法を提供し、フォームの使いやすさを向上させます。