基於另一個下拉框的值更改了下拉框選項

Question

我正在使用JavaScript進行編程，並且我發現一些問題必須由專家對drop-down框進行回答。

的情況是：

我有一個drop-down框，給出了各省的一些可能的選項，同時僅取決於什麼是在各省drop-down選擇的第二個（鎮）。

JavaScript中有一種方法，當我在省份之間選擇時，第二個drop-down給出了所選省份的選項嗎？

Answer 1

這是一個簡單的例子，讓你開始。

它通過將change事件的事件偵聽器附加到省下拉菜單中，然後通過provs對象查找該省的哪些城鎮。

請參閱評論以獲取每行內容的詳細說明。

window.onload = function() { 
 
    // provs is an object but you can think of it as a lookup table 
 
    var provs = { 
 
     'British Columbia': ['Victoria', 'Sanitch'], 
 
     'Ontario': ['Bracebridge', 'Waterloo'] 
 
     }, 
 
     // just grab references to the two drop-downs 
 
     prov_select = document.querySelector('#prov'), 
 
     town_select = document.querySelector('#town'); 
 

 
    // populate the provinces drop-down 
 
    setOptions(prov_select, Object.keys(provs)); 
 
    // populate the town drop-down 
 
    setOptions(town_select, provs[prov_select.value]); 
 
    
 
    // attach a change event listener to the provinces drop-down 
 
    prov_select.addEventListener('change', function() { 
 
    // get the towns in the selected province 
 
    setOptions(town_select, provs[prov_select.value]); 
 
    }); 
 
    
 
    function setOptions(dropDown, options) { 
 
    // clear out any existing values 
 
    dropDown.innerHTML = ''; 
 
    // insert the new options into the drop-down 
 
    options.forEach(function(value) { 
 
     dropDown.innerHTML += '<option name="' + value + '">' + value + '</option>'; 
 
    }); 
 
    } 
 
};

<select id="prov"></select> 
 
<select id="town"></select>