JavaScript二维数组实现的省市联动菜单

时间：2021-05-26

复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//初始化一个二维数组存储城市列表项
var cities=[
["安庆","合肥","桐城"],
["石家庄","保定","唐山"],
["郑州","洛阳","开封"]
];
//选中某个省份时候，调用添加城市的方法
function provinceChanged(sel){
//alert("select的长度"+sel.options.length);
//sel其实就是select对象
//遍历options集合，查找选中的选项
for(var x=0;x<sel.options.length;x++)
{
var opt=sel.options[x];
if(opt.selected)
{
//给被选择的城市的select 添加option
addCityToSelect(x)
}
}
}
//添加选中省份下的城市项到city的select中
function addCityToSelect(x){
//从二维数组中找出对应的城市
var city=cities[x-1];
var citySelect=document.getElementById("select_city");

//设置城市的select对象下的options长度为1
citySelect.options.length=1;
//设置options集合的长度，删除
//citySelect.options.length=1;
for(var x=0;x<city.length;x++)
{
//创建元素节点对象
var optionName=document.createElement("option");
//给option设置显示内容
optionName.innerHTML=city[x];
//将创建的option添加到select
citySelect.appendChild(optionName);

}
}
</script>
</head>
<body>
<select onchange="provinceChanged(this);">
<!--this的含义：是指select对象调用provinceChanged(this),并且在此方法中
把对象本身作为参数传递，以便对其进行操作。 -->
<option>请选择省份</option>
<option>安徽</option>
<option>河北</option>
<option>河南</option>
</select>
<select id="select_city">
<option>请选择城市</option>
</select>
</body>
</html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章