根據選擇填充下拉清單

開發具有多個下拉清單的表單時，根據在另一個中進行的選擇。這樣可以縮小選擇範圍並提高資料輸入效率，從而提供更用戶友好的體驗。

實作此功能的一種方法是使用 JavaScript 動態更新依賴下拉清單的內容。以下的範例示範如何根據另一個下拉式選單 (A) 中的選擇來填入一個下拉式選單 (B)：

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 
此 JavaScript 函數採用兩個參數 ddl1 和 ddl2，它們代表兩個下拉清單。它首先使用將在每個下拉列表中顯示的選項來初始化數組。 
接下來，使用 switch 語句來處理 ddl1 中所做的選擇。根據 ddl1 的值，它會清除 ddl2 中的選項並用適當的選項填充它。 createOption 函數用於建立每個選項並將其新增至 ddl2。 
在HTML 中，應定義兩個下拉清單：

  
  Colours
  Shapes
  Names



當使用者在ddl1中選擇一個選項時，onchange事件會觸發configureDropDownLists函數，該函數會對應更新ddl2中的選項。這種方法提供了一種根據另一個下拉清單中的選擇填入下拉清單的便捷方法，從而增強了表單的可用性。