标签：联动 word hang 中国 load ini document style 理解
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>省市联动</title> </head> <script type="text/javascript"> <!-- //二维数组 var arr = ["中国","美国","日本"]; arr["中国"] = ["山西","北京","河南"]; arr["美国"] = ["洛杉矶","纽约","华盛顿"]; arr["日本"] = ["东京","北海道","神户"]; arr["山西"] = ["大同","太原","忻州"]; arr["北京"] = ["海淀","昌平","朝阳"]; arr["河南"] = ["郑州","洛阳","商丘"]; arr["洛杉矶"] = ["大同洛杉矶","太原洛杉矶","忻州洛杉矶"]; arr["纽约"] = ["海淀纽约","昌平纽约","朝阳纽约"]; arr["华盛顿"] = ["郑州华盛顿","洛阳华盛顿","商丘华盛顿"]; arr["东京"] = ["大同东京","太原东京","忻州东京"]; arr["北海道"] = ["海淀北海道","昌平北海道","朝阳北海道"]; arr["神户"] = ["郑州神户","洛阳神户","商丘神户"]; function init(){ /* //通过三维数组来填充数值。三维数组不容易理解 alert(arr);//中国 arr代表的是arr[0],arr[1],arr[2] alert(arr[arr[0]]);//山西，北京，河南，表示arr[arr[0][0]] alert(arr[arr[0]][1]);//北京 alert(arr[arr[arr[0]][0]]);//大同，太原，忻州 ， 其实arr[arr[0]]就相当于山西 所以写的时候，可以先写arr["中国"] = arr[arr[0]] arr["中国"][] //填充国家 for(var i = 0; i < arr.length ; i++){ //创建一个option对象 //第一种 Option对象代表HTML表中下拉列表中的一个选项，在HTML表单中<option>标签每出//现一次，一个Option对象就会被创建 var option = new Option(); option.text = arr[i]; option.value = arr[i]; //将option对象添加到国家select中,options是一个数组 document.getElementById("country").options.add(option); } for(var i = 0; i < arr[arr[0]].length; i++){ var option = new Option(); option.text = arr[arr[0]][i]; option.value = arr[arr[0]][i]; document.getElementById("province").options.add(option); } for(var i = 0; i < arr[arr[arr[0]][0]].length; i++){ var option = new Option(); option.text = arr[arr[0][0]][i]; option.value = arr[arr[0][0]][i]; document.getElementById("area").options.add(option); } 可以把这些系诶到函数里去。 */ //调用数组的函数 //填充国家 fillData(arr,"country"); //填充地区 fillData(arr[arr[0]],"province"); //填充 fillData(arr[arr[arr[0]][0]],"area"); //填充好之后，就需要做改变了 } function fillData(arr,id){ //先清空select选项 document.getElementById(id).options.length = 0; //清空后添加选项 for(var i = 0; i < arr.length; i++){ //创建一个option对象 var option = new Option(); option.text = arr[i]; option.value = arr[i]; //将option对象添加到select中 document.getElementById(id).options.add(option); } } function changePro(coun){ //情况原有的省市内容 //document.getElementById("province").options.length = 0; //添加省市 //alert(coun); fillData(arr[coun],"province"); fillData(arr[arr[coun][0]],"area"); // } function changeArea(pro){ //document.getElementById("area").options.length = 0; fillData(arr[pro],"area"); } //--> </script> <body onload = "init()"> 国家<select id = "country" onchange = "changePro(this.value)"></select><!--将选择的国家传递过去--> 省市<select id = "province" onchange = "changeArea(this.value)"></select> 地区<select id = "area"></select> </body> </html>
标签：联动 word hang 中国 load ini document style 理解
原文地址：http://www.cnblogs.com/taiguyiba/p/6192867.html
