JavaScript を使用して、別のドロップダウンの選択に基づいて 1 つのドロップダウンを設定するにはどうすればよいですか?

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

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

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

サンプル コード

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

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

HTML マークアップ

次の 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>

使用法

この機能を使用するには、単に configureDropDownLists 関数を呼び出し、最初のドロップダウン (ddl1) と 2 番目のドロップダウン (ddl2) を引数として渡します。この関数は、ドロップダウン A で行われた選択に基づいてドロップダウン B の動的な入力を処理します。

このコード スニペットは、JavaScript を使用して、別のドロップダウンで行われた選択に基づいて 1 つのドロップダウンに動的に入力できる完全な機能ソリューションを示しています。データベース呼び出しや AJAX リクエストは必要ありません。

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