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 = 功能，

获取<select id="countries">
获取所选国家/地区下的所有城市，将其循环以创建<option>，然后附加到<select id="cities">
最后，显示<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>

有人在选项中单击时创建新选择

1 个答案: