當有人單擊選項時創建新的選擇

Question

有一個帶有國家列表的選擇。 選擇一個國家/地區后，應使用該國家/地區的城市列表創建新的選擇。

 var selectCountries = document.getElementById("countries"); var options = selectCountries.options; for( var i = 0; i < options.length; i++ ){ options[i].addEventListener("click",funct ) } function funct(){ var mainDiv = document.getElementById("main"); var newCities = document.createElement("select"); main.appendChild(newCities); var newOptions = document.createElement("option"); newCities.appendChild(newOptions); } 

 <div id="main"> <select id="countries"> <option>France</option> <option>Germany</option> </select> </div> 

Answer 1

我的建議是：創建一個<select id="cities">然后將其隱藏，然后在選擇一個國家時，我們不必擔心<select id="cities">存在。

對於DOM，您需要在<select id="countries">下循環選項，以檢查選擇了哪個選項。 所以我創建了一個函數= getSelectedValue

我創建了一個var citiesConfigs以保存所有城市，然后在選擇一個城市時，拉出所選縣以下的所有城市。

最后，在function = funct中 ，

1. 獲得<select id="countries">選定選項

2. 獲取所選國家/地區下的所有城市，將其循環以創建<option>然后附加到<select id="cities">

3. 最后，顯示<select id="cities">

 var selectCountries = document.getElementById("countries"); var options = selectCountries.options; for( var i = 0; i < options.length; i++ ){ options[i].addEventListener("click",funct ) } var citiesConfigs = {'france': ['CityA', 'CityB'], 'germany':['CityC','CityD']} function getSelectedValue(elementId) { var elt = document.getElementById(elementId); if (elt.selectedIndex == -1) return null; return elt.options[elt.selectedIndex].value; } function funct(){ var mainDiv = document.getElementById("main"); var selectedCity = document.getElementById("cities") selectedCity.innerHTML = '' citiesConfigs[getSelectedValue('countries')].forEach(function(city){ let newOption = document.createElement("option"); newOption.value = city newOption.text = city selectedCity.appendChild(newOption); }) selectedCity.style.display = '' } 

 <div id="main"> <select id="countries"> <option value="france">France</option> <option value="germany">Germany</option> </select> <select id="cities" style="display:none"></select> </div>