ユーザーの選択に基づいてドロップダウンを設定するにはどうすればよいですか?

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

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

この機能を実現する 1 つのアプローチには、JavaScript を使用して依存関係のあるドロップダウンのコンテンツを動的に更新することが含まれます。以下は、別のドロップダウン (A) での選択に基づいて 1 つのドロップダウン (B) に値を設定する方法を示す例です。

<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 関数は、2 つのドロップダウンを表す 2 つのパラメーター ddl1 と ddl2 を受け取ります。まず、各ドロップダウンに表示されるオプションを使用して配列を初期化します。

次に、switch ステートメントを使用して、ddl1 での選択を処理します。 ddl1 の値に応じて、ddl2 のオプションをクリアし、適切なオプションを設定します。 createOption 関数は、各オプションを作成して ddl2 に追加するために使用されます。

HTML では、次の 2 つのドロップダウンを定義する必要があります。

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

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

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

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