如何在沒有資料庫查詢的情況下根據選擇動態填入下拉清單？

根據選擇動態填充下拉清單

當面臨根據另一個下拉清單中所做的選擇修改一個下拉清單內容的任務時，了解如何用JavaScript來實現這個功能至關重要。與需要資料庫查詢的情況不同，這個過程可以在不使用 AJAX 的情況下簡化。

為了幫助您，我們提供了一個簡潔有效的JavaScript 程式碼範例，示範如何填入基於第二個下拉清單（下拉式清單B）在第一個下拉式選單（下拉式選單A）中所做的選擇。此程式碼不涉及任何外部資料檢索或資料庫查詢：

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

在此程式碼中，我們定義了三個陣列（顏色、形狀和名稱），其中包含應在下拉式選單B 中顯示的值下拉清單A 中的每個對應選項。

當使用者從下拉清單 A 中選擇選項時，將呼叫 configureDropDownLists 函數。根據所選選項，函數會清除下拉式選單 B 的內容，並使用相關陣列中的適當值重新填入它。

您可以透過在 HTML 文件中建立兩個下拉式選單並使用 onchange 事件來實現此程式碼第一個下拉式清單上的處理程序以觸發填入第二個下拉式清單的函數。

以上是如何在沒有資料庫查詢的情況下根據選擇動態填入下拉清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！