实例：省市区的三级联动
<body>
<section>
<a>省份</a>
<select id="province">
<option value="0">--请选择--</option>
<option value="1">山东</option> //通过value来区分市的二维数组
<option value="2">山西</option>
</select>
<a>城市</a>
<select id="city">
<option>--请选择--</option>
</select>
<a>区域</a>
<select id="area">
<option>--请选择--</option>
</select>
</section>
</body>
<script>
var arr = new Array();
arr[1] = ["莱芜","济南","东营"];
arr[2] = ["长治","太原","壶关"];
var provinceInput = document.getElementById("province");
var cityInput = document.getElementById("city");
var areaInput = document.getElementById("area");
//省和市的联动
provinceInput.onchange = function () {
cityInput.options.length = 1; //省改变的时候市的长度变为1
for(var i = 0;i < arr[provinceInput.value].length;i++) {
cityInput.add(new Option(arr[provinceInput.value][i],value = i)); //通过不同的value来选择不同的二维数组添加元素，
在添加option的同时给市添加不同的value以便于区分区的二维数组
}
};
var index = new Array(); //山东省下面市的地区
index[0] = ["莱芜1"];
index[1] = ["济南1"];
index[2] = ["东营1"];
var index2 = new Array(); //山西省下面市的地区
index2[0] =["长治1"];
index2[1] =["太原1"];
index2[2] =["壶关1"];
cityInput.onchange = function () {
areaInput.options.length = 1;
//通过省的value值来区分不同的数组
if(provinceInput.value == 1){
for(var i = 0;i < index[cityInput.value].length;i++) {
areaInput.add(new Option(index[cityInput.value][i]));
}
}else if(provinceInput.value == 2){
for(var i = 0;i < index2[cityInput.value].length;i++) {
areaInput.add(new Option(index2[cityInput.value][i]));
}
}
};
</script>