如何使用 JavaScript 根據另一個下拉清單中的選擇填入下拉清單？

使用JavaScript 根據另一個下拉清單中的選擇填充一個下拉清單

當面臨根據另一個下拉清單中的選擇動態更新一個下拉清單中的選項的任務時，它是對於避免不必要的複雜性（例如資料庫查詢）至關重要。讓我們探索一個簡單的基於 JavaScript 的解決方案，無需 AJAX 呼叫即可完成此任務。

為了說明此方法，請考慮一個場景，其中有兩個下拉清單：下拉清單A 包含「顏色」、「」等選項形狀」和「名稱」以及下拉式選單B。我們希望根據下拉選單A 中所做的選擇填充下拉選單B 中的選項。

以下HTML 標記包含兩個下拉清單：

用法

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

使用此功能，只需呼叫configureDropDownLists 函數，傳遞第一個下拉清單(ddl1)和第二個下拉清單(ddl2) 作為參數。您使用JavaScript 根據另一個下拉列表中的選擇動態填充一個下拉列表，無需資料庫呼叫或AJAX 請求。

以上是如何使用 JavaScript 根據另一個下拉清單中的選擇填入下拉清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！