首页 > 代码库 > 省市联动

省市联动

2024-08-27 18:20:16   221人阅读

 

 

<!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 = http://www.mamicode.com/arr[i];"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 = http://www.mamicode.com/arr[arr[0]][i];"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 = http://www.mamicode.com/arr[arr[0][0]][i];"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 onl oad = "init()">
  国家<select id = "country" onchange = "changePro(this.value)"></select><!--将选择的国家传递过去-->
  省市<select id = "province" onchange = "changeArea(this.value)"></select>
  地区<select id = "area"></select>
 </body>
</html>

 

省市联动


联系
我们