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

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文件中选择了某个选择元素，它将打印出该国家的城市。

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

现在看到它适用于前两个select元素，这使我认为我的for循环或HTML代码中存在问题，但我不确定。 面对我什至看不见的表情，这甚至可能只是一个小问题。

任何帮助将不胜感激，谢谢。

Answer 1

就像安德里亚斯（Andreas）提到的那样，问题在于前两个选项中的optionsArray分配中的引号是正确的：

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

之后，它是这样的：

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

看到额外的报价

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-09-22 17:46:28

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-09-22 17:46:28

解决方案1
0 已采纳 2016-09-22 17:46:28