Question

好的，这是我的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menus</title>
<script type="text/javascript" src="Cities.js">
</script>
</head>
<body>

<select id="Countries" name="countries" onchange="populate('Countries','Cities')">
    <option value="">Country</option>
    <option value="Ireland">Ireland</option>
    <option value="Romania">Romania</option>
    <option value="England">England</option>
    <option value="Spain">Spain</option>
    <option value="Germany">Germany</option>
</select>

<select id="Cities" name="cities">
    <option value="">Cities</option>
</select>

</form>

</body>
</html>

好的，到目前为止一切似乎都很好，这是我的JavaScript代码

//Populates Countries and Cities select form elements

function populate(s1,s2)

{

var s1 = document.getElementById(s1);//s1==Countries

var s2 = document.getElementById(s2);//s2==Cities

s2.innerHTML="";

/**
 * if s1==Ireland print Dublin
 */
if(s1.value=="Ireland"){
    var optionArray = ["|", "dublin|Dublin"];
}
/**
 * If s1==Romania print Bucharest
 */
else if (s1.value=="Romania"){
        var optionArray=["|", "bucharest|Bucharest"];
    }

/**
 * if s1==England print Liverpool
 */
else if (s1.value=="England"){
        var optionArray=["|", "liverpool"|"Liverpool"];
    }

/**
 * if s1==Spain print Madrid
 */
else if (s1.value=="Spain") {
        var optionArray=["|", "madrid"|"Madrid"];
}

/**
 * if s1==Germany print Munich
 */
else if (s1.value=="Germany"){
    var optionArray=["|","munich"|"Munich"];
}


for(var option in optionArray){
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML=pair[1];
    s2.options.add(newOption);
}

}

正如您所看到的，我正在尝试创建if和if else语句，以便如果选择html文件中的某个select元素，它将打印出该国家/地区的城市。

现在奇怪的部分是它适用于爱尔兰和罗马尼亚，当它们被选中时，我可以选择从其他下拉菜单中选择都柏林或布加勒斯特，但它不适用于其他3个国家？

现在看到它适用于前两个选择元素，这让我觉得在我的for循环或我的HTML代码中存在问题，但我不完全确定。它甚至可能只是一个小问题，盯着我，我看不到。

非常感谢任何帮助，谢谢。

Answer 1

就像安德烈亚斯提到的那样，问题在于前两个选项中的引用分配是正确的：

var optionArray = ["|", "dublin|Dublin"]

之后就像这样：

var optionArray=["|", "liverpool"|"Liverpool"]

查看额外报价

Here是我为您制作的更正示例。

我正在尝试使用JavaScript在HTML网页上创建动态菜单，但一直遇到麻烦

1 个答案: