是首先应该添加两个下拉列表并设置id属性来方便操作：
1 <select id="country"> 2 <option>国家</option> 3 </select> 4 <select id="city"> 5 <option>城市</option> 6 </select>
js代码中首先需要声明国家和城市两个数组：
var country = ['中国', '美国','英国']
var city = [
['北京', '上海'],
['纽约'],
['伦敦']
]
然后通过id获取页面中的下拉菜单元素：
var cou = document.getElementById("country");
var cit = document.getElementById("city");
然后初始化第一个列表：
//初始化国家下拉列表 for(var i = 0; i < country.length; i++) { //新的option var option = new Option() //赋值 option.appendChild(document.createTextNode(country[i])) //插入 cou.appendChild(option) }
在第一个下拉列表中选择国家后，第二个列表显示相应的城市：
//为国家下拉列表添加事件 cou.addEventListener('change', function(){ //另城市列表变为初始状态，可以注释掉查看效果 cit.options.length = 1; //如果国家选择不为默认值 if(cou.selectedIndex != 0) { //遍历相应国家的城市 for(var j = 0; j < city[cou.selectedIndex - 1].length; j++) { var option2 = new Option(city[cou.selectedIndex-1][j],city[cou.selectedIndex-1][j]) cit.options.add(option2) } } });
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id="country"> <option>国家</option> </select> <select id="city"> <option>城市</option> </select> <script> var country = ['中国', '美国','英国'] var city = [ ['北京', '上海'], ['纽约'], ['伦敦'] ] var cou = document.getElementById("country"); var cit = document.getElementById("city"); //初始化国家下拉列表 for(var i = 0; i < country.length; i++) { //新的option var option = new Option() //赋值 option.appendChild(document.createTextNode(country[i])) //插入 cou.appendChild(option) } //为国家下拉列表添加事件 cou.addEventListener('change', function(){ //另城市列表变为初始状态，可以注释掉查看效果 cit.options.length = 1; //如果国家选择不为默认值 if(cou.selectedIndex != 0) { //遍历相应国家的城市 for(var j = 0; j < city[cou.selectedIndex - 1].length; j++) { var option2 = new Option(city[cou.selectedIndex-1][j],city[cou.selectedIndex-1][j]) cit.options.add(option2) } } }); </script> </body> </html>