实例：省市区的三级联动
<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>
时间： 2024-10-21 15:59:20