JavaScript实现省市联动菜单：二维数组与DOM操作详解

 
<!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中添加对应城市
addCityToSelect(x)
} 
} 
} 
// 内部函数：将选中省份下的城市项添加到city的select中
function addCityToSelect(x){
// 根据传入的索引从二维数组中获取对应的城市数据
var city=cities[x-1];
var citySelect=document.getElementById("select_city");
/*==================删除节点中已经存在的元素===============
在第二次或第n次调用该方法时，城市select对象中可能已存在之前添加的节点，因此需要执行清空操作。
思路1：利用select对象的removeChild()方法，通过循环遍历逐个删除子节点。
思路2：直接设置select.options.length=1，即可达到清空除默认选项外所有节点的效果。
*/ 
// 设置城市的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);
/* 
在此处，将某一个省份下的所有城市添加到citySelect对象之后，
如果再次选择另一个省份，其城市列表会被追加到citySelect节点下方，
导致城市列表重复显示，效果错误。因此，要求在每次添加新城市前，
必须先清空citySelect节点下的原有内容。具体实现如下：
==================删除节点中已经存在的元素===============
*/ 
} 
} 
</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>
复制代码