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

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

為了說明此方法，請考慮一個場景，其中有兩個下拉列表：下拉列表A 包含“顏色”、“”等選項形狀”和“名稱”以及下拉式選單B。我們希望根據下拉選單A 中所做的選擇填充下拉式選單B 中的選項。 (ddl1, ddl2) { var color = ['黑色', '白色', '藍色']; var shape = ['正方形', '圓形', '三角形']; var 名稱 = ['約翰', '大衛', '莎拉']; 開關（ddl1.值）{ 案例“顏色”： ddl2.options.length = 0; for (i = 0; i

HTML 標記

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

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 
用法
要使用此功能，只需呼叫configureDropDownLists 函數，傳遞第一個下拉清單(ddl1) 和第二個下拉列表(ddl2)作為參數。此函數將根據下拉清單 A 中的選擇來處理下拉清單 B 的動態填充。 
此程式碼片段示範了一個完整的工作解決方案，讓您可以使用 JavaScript 根據另一個下拉列表中的選擇動態填充一個下拉列表，無需資料庫呼叫或AJAX請求。