Javascript 2个相互连接的下拉列表（第二个列表取决于第一个列表）
我试图用这些要求来解决一个练习：“创建一个HTML页面，也使用javascript，其中包含一个下拉列表，您可以在其中选择州，另一个下拉列表动态填充属于该国的城市。 我看到了其他类似的问题，并应用了这些建议，但似乎仍然不起作用（第二个下拉列表仍然为空）Javascript 2个相互连接的下拉列表（第二个列表取决于第一个列表）,javascript,jquery,html,Javascript,Jquery,Html,我试图用这些要求来解决一个练习：“创建一个HTML页面，也使用javascript，其中包含一个下拉列表，您可以在其中选择州，另一个下拉列表动态填充属于该国的城市。 我看到了其他类似的问题，并应用了这些建议，但似乎仍然不起作用（第二个下拉列表仍然为空） 函数更新（） { var阿尔巴尼亚=[“地拉那”、“杜勒斯”、“弗罗雷”、“什科德”]； 科索沃变量=[“普里什蒂纳”、“米特罗维察”、“佩耶”、“加科夫”]； 德国var=[“柏林”、“法兰克福”、“汉诺威”、“波恩”]； var count
函数更新（）
{
var阿尔巴尼亚=[“地拉那”、“杜勒斯”、“弗罗雷”、“什科德”]；
科索沃变量=[“普里什蒂纳”、“米特罗维察”、“佩耶”、“加科夫”]；
德国var=[“柏林”、“法兰克福”、“汉诺威”、“波恩”]；
var countries=document.getElementById（“1”）；
var cities=document.getElementById（“2”）；
所选变量=国家。选项[countries.selectedIndex]。值；
如果（所选==“1”）{
对于（变量i=0；i<0.length；i++）{
var opt1=document.createElement（'option'）；
opt1.innerHTML=阿尔巴尼亚[i]；
opt1.value=阿尔巴尼亚[i]；
城市：儿童（opt1）；
}
}
否则如果（所选==“2”）
{
对于（var j=0；j<0.length；j++）{
var opt2=document.createElement（'option'）；
opt2.innerHTML=科索沃[j]；
opt2.value=科索沃[j]；
城市：儿童（opt2）；
}
}
否则如果（所选==“3”）
{
对于（var k=0；k
`"
<html>
<head></head>
<body>
<p>
<select id="country" onchange="update()">
<option selected="selected">Select Country</option>
<option value="1">Albania</option>
<option value="2">Kosovo</option>
<option value="3">Germany</option>
</select>
</p>
<p>
<select id="city">
<option selected="selected">Select City</option>
</select>
</p>
<script type="text/javascript">
function update()
{
var albania=["Tirana", "Durres", "Vlore", "Shkoder"];
var kosovo=["Prishtina", "Mitrovica", "Peje", "Gjakove"];
var germany=["Berlin", "Frankfurt", "Hannover", "Bonn"];
var countries=document.getElementById("country");
var cities=document.getElementById("city");
var selected=countries.value;
var html='<option selected="selected">Select City</option>';
if(selected === "1")
{
for(var i=0; i < albania.length; i++)
{
html+='<option value="' + albania[i] + '">' + albania[i] + '</option>';
}
}
else if(selected === "2")
{
for(var j=0; j < kosovo.length; j++)
{
html+='<option value="' + kosovo[j] + '">' + kosovo[j] + '</option>';
}
}
else if(selected === "3")
{
for(var k=0; k < germany.length; k++)
{
html+='<option value="' + germany[k] + '">' + germany[k] + '</option>';
}
}
cities.innerHTML=html;
}
</script>
</body>
</html>
选择国家
阿尔巴尼亚
科索沃
德国
选择城市
函数更新（）
{
var阿尔巴尼亚=[“地拉那”、“杜勒斯”、“弗罗雷”、“什科德”]；
科索沃变量=[“普里什蒂纳”、“米特罗维察”、“佩耶”、“加科夫”]；
德国var=[“柏林”、“法兰克福”、“汉诺威”、“波恩”]；
var countries=document.getElementById（“国家”）；
var cities=document.getElementById（“城市”）；
所选风险值=国家/地区价值；
var html='Select City'；
如果（选定==“1”）
{
对于（变量i=0；i<0.length；i++）
{
html+=''+阿尔巴尼亚[i]+''；
}
}
否则如果（所选==“2”）
{
对于（var j=0；j<0.length；j++）
{
html+=''+kovo[j]+''；
}
}
否则如果（所选==“3”）
{
对于（var k=0；kvar albania = ["Tirana","Durres","Vlore","Shkoder"];
var kosovo = ["Prishtina","Mitrovica","Peje","Gjakove"];
var germany = ["Berlin","Frankfurt","Hannover","Bonn"];
document.getElementById("1").addEventListener("change", function(e){
var select2 = document.getElementById("2");
select2.innerHTML = "";
var aItems = [];
if(this.value == "2"){
aItems = kosovo;
} else if (this.value == "3") {
aItems = germany;
} else if(this.value == "1") {
aItems = albania;
}
for(var i=0,len=aItems.length; i<len;i++) {
var option = document.createElement("option");
option.value= (i+1);
var textNode = document.createTextNode(aItems[i]);
option.appendChild(textNode);
select2.appendChild(option);
}
}, false);
var阿尔巴尼亚=[“地拉那”、“杜勒斯”、“弗罗雷”、“什科德”]；
科索沃变量=[“普里什蒂纳”、“米特罗维察”、“佩耶”、“加科夫”]；
德国var=[“柏林”、“法兰克福”、“汉诺威”、“波恩”]；
document.getElementById（“1”）.addEventListener（“更改”，函数（e）{
var select2=document.getElementById（“2”）；
选择2.innerHTML=“”；
var-aItems=[]；
如果（this.value==“2”）{
aItems=科索沃；
}否则如果（this.value==“3”）{
aItems=德国；
}else if（this.value==“1”）{
aItems=阿尔巴尼亚；
}
对于（var i=0，len=aItems.length；iJavascript:
<script type="text/javascript">
function update() {
//Add additional country with id and city array
var countriesArray = [
["albania", "1", ["Tirana", "Durres", "Vlore", "Shkoder"]],
["kosovo", "2", ["Prishtina", "Mitrovica", "Peje", "Gjakove"]],
["germany", "3", ["Berlin", "Frankfurt", "Hannover", "Bonn"]]
];
//Get country dropdown
var countries = document.getElementById("1");
//Get city dropdown
var cities = document.getElementById("2");
//Get country selected item
var selected = countries.options[countries.selectedIndex].value;
//If country is not "Select Country"
if (selected != "0") {
//Clear previous cities - this can be moved outside of if condition, and remove the else, if wanted.
Clear(cities);
//For each country, if it is selected, populate the cities dropdown with its associated city array.
var country;
var cityArray;
for (var i = 0; i < countriesArray.length; i++) {
//Get country
country = countriesArray[i];
if (country[1] == selected) {
//Get city array
cityArray = country[2];
//Populate options with city array
for (var p = 0; p < cityArray.length; p++) {
var opt1 = document.createElement('option');
opt1.innerHTML = cityArray[p];
opt1.value = cityArray[p];
cities.appendChild(opt1);
}
}
}
}
else
{
Clear(cities);
}
}
function Clear(ctrl)
{
ctrl.options.length = 1;
}
</script>
函数更新（）{
//使用id和城市数组添加其他国家/地区
var countriesArray=[
[“阿尔巴尼亚”、“1”、“地拉那”、“杜勒斯”、“弗罗雷”、“什科德”]，
[“科索沃”、“2”和[“普里什蒂纳”、“米特罗维察”、“佩耶”、“加科夫”]，
[“德国”、“3”、“柏林”、“法兰克福”、“汉诺威”、“波恩”]]
];
//获取国家下拉列表
var countries=document.getElementById（“1”）；
//获取城市下拉列表
var cities=document.getElementById（“2”）；
//获取所选项目的国家/地区
所选变量=国家。选项[countries.selectedIndex]。值；
//如果国家不是“选择国家”
如果（已选择！=“0”）{
//清除以前的城市-如果需要，可以将其移到if条件之外，并删除else。
清除（城市）；
//对于每个国家/地区，如果选中，则使用其关联的城市数组填充“城市”下拉列表。
var国家；
var cityArray；
对于（变量i=0；i
HTML:
选择国家
阿尔巴尼亚
科索沃
德国
选择城市
您大量使用DOM API，这会降低页面的性能，在创建选项文本时使用“createTextNode”函数而不是“innerHTML”。
<p><select id= "1">
<option selected = "selected" >Select Country</option>
<option value="1">Albania</option>
<option value="2">Kosovo</option>
<option value="3">Germany</option>
</select>
</p>
<p><select id="2">
<option selected = "selected" ></option></select></p>
<script type="text/javascript">
function update() {
//Add additional country with id and city array
var countriesArray = [
["albania", "1", ["Tirana", "Durres", "Vlore", "Shkoder"]],
["kosovo", "2", ["Prishtina", "Mitrovica", "Peje", "Gjakove"]],
["germany", "3", ["Berlin", "Frankfurt", "Hannover", "Bonn"]]
];
//Get country dropdown
var countries = document.getElementById("1");
//Get city dropdown
var cities = document.getElementById("2");
//Get country selected item
var selected = countries.options[countries.selectedIndex].value;
//If country is not "Select Country"
if (selected != "0") {
//Clear previous cities - this can be moved outside of if condition, and remove the else, if wanted.
Clear(cities);
//For each country, if it is selected, populate the cities dropdown with its associated city array.
var country;
var cityArray;
for (var i = 0; i < countriesArray.length; i++) {
//Get country
country = countriesArray[i];
if (country[1] == selected) {
//Get city array
cityArray = country[2];
//Populate options with city array
for (var p = 0; p < cityArray.length; p++) {
var opt1 = document.createElement('option');
opt1.innerHTML = cityArray[p];
opt1.value = cityArray[p];
cities.appendChild(opt1);
}
}
}
}
else
{
Clear(cities);
}
}
function Clear(ctrl)
{
ctrl.options.length = 1;
}
</script>
<p>
<select id="1" onchange="update()">
<option value="0" selected="selected">Select Country</option>
<option value="1">Albania</option>
<option value="2">Kosovo</option>
<option value="3">Germany</option>
</select>
</p>
<p>
<select id="2">
<option value="0" selected="selected">Select City</option>
</select>
</p>