效果图
HTML页面代码部分
<body>
省份<select id="province" onchange="showCity()">
<option>省份</option>
<option>河南</option>
<option>山东</option>
<option>广东</option>
</select>
城市<select id="city">
<option>城市</option>
</select>
</body>
JS代码部分
<script>
function showCity (){
/*
定义二维数组，存放城市
*/
//城市数组要与option标签中的省份相对应，因为第一个选项就是“省份”描述，所以第一个数组用空数组即可
var citys = [[],["郑州","南阳","安阳"],["蓝翔","青岛","崂山"],["深圳","广州","中山"]];
/*
根据选择的省份，得到这个省份中的城市数组
*/
//获取用户选择的省份
var provinceNode = document.getElementById("province");
//获取选择的省份的索引
var index = provinceNode.selectedIndex;
//根据省份的索引从二维数组中获取到显示的城市数据，showCity是一个一维数组
var showCity = citys[index];
/*
将城市下拉菜单中的所有标签删除
*/
//我们需要把显示的数据显示到城市这个下拉菜单中，首先需要获取到城市下拉菜单的节点，再获取到它的子节点，也就是具体的城市，将他们删除后，再将获取到的信息显示在城市下拉菜单中
//获取到城市下拉菜单的节点
var cityNode = document.getElementById("city");
//获取到城市下拉菜单的子节点，也就是具体的城市选项，得到的是一个子节点数组
var cityChildNodes = cityNode.childNodes;
//将所有的cityChilds删除，也就是城市下拉菜单中的所有元素。
//for循环这里没有变量自增，是因为每当删除一个城市后，下一个城市就自动向前，所以只用一直删除第一个城市即可。
for(var i = 0; i < cityChildNodes.length; ){
cityNode.removeChild(cityChildNodes[i]);
}
/*
将得到的城市数组显示在城市的下拉列表中
*/
//将获取的城市显示到城市下拉菜单的option标签中
for(var i = 0; i < showCity.length; i++){
//创建一个option标签用于存放具体的城市
var optionCityNode = document.createElement("option");
//将查询到的城市添加到option标签中
optionCityNode.innerHTML = showCity[i];
//将optionCityNode标签添加到城市下拉菜单中
cityNode.appendChild(optionCityNode);
}
}
</script>
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
