给每个市一个id,然后用onchange事件当一级联动改变时触发,然后拿到当前的id,去二级联动的Json里面找对应的value对应的列表,添加进去就行了,三级联动的原理也是这个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript">
//定义的一个数组
var city=[
["北京","天津","上海","重庆"],
["南京","苏州","南通","常州"],
["福州","福安","龙岩","南平"],
["广州","潮阳","潮州","澄海"],
["兰州","白银","定西","敦煌"]
];
function getCity(){ //下拉框值改变的时候就执行getCity方法
var sltProvince=document.getElementById("province"); //获取id为“province”的元素
var sltCity=document.getElementById("city"); //获取id为“city”的元素
//sltProvince.selectedIndex-1表示获取当前province这个下拉框选中项的索引
//city[sltProvince.selectedIndex-1]表示city数组中的第几个元素
var provinceCity=city[sltProvince.selectedIndex-1];
sltCity.length=1;
//通过遍历循环来给city这个下拉框设置选项
for(var i=0;i<provinceCity.length;i++){
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
}
}
</script>
</head>
<body>
<form action="somepage.asp" name="theForm">
<select name="province" id="province" onchange="getCity()">
<option value="0">请选择所在省份</option>
<option value="直辖市">直辖市</option>
<option value="江苏省">江苏省</option>
<option value="福建省">福建省</option>
<option value="广东省">广东省</option>
<option value="甘肃省">甘肃省</option>
</select>
<select id="city" name="city">
<option value="0">请选择所在城市</option>
</select>
</form>
</body>
</html>