JS-小技巧-国家城市联动

最新推荐文章于 2022-07-08 06:54:57 发布

weixin_30781631

最新推荐文章于 2022-07-08 06:54:57 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoshan-coding/p/4999293.html

本文介绍如何使用JavaScript操作二维数组，通过HTML和JS接口函数，实现国家和对应城市的数据展示。

首先，二维数组存储国家和对应城市,第一个写入国家，随后列上城市名

var arr=new array(4);
arr[0]=["china",'beijing','chengdu','wuhan'];
arr[1]=["america",'newyork','houston','atlanta'];
arr[2]=["germany",'xx','yy','zz'];
arr[3]=["japan",'tokyo','ban','heidao'];

然后html内写接口函数

<select id="country" onchange="add1(this.value);">

然后写JS函数

function add1(val){
    
    var cityId=document.getElementById("city");
    var options1=cityId.getElementsByTagName("option");
    for(var m=0;m<options1.legnth;m++){

        var op=options1[m];
        cityId.removeChild(op);
        m--;

    }

    for(int i=0;i<arr.length;i++){

        arr1=arr[i];
        if(arr1[0]==val){

            for(int j=1;j<arr1.length;j++){

                var value1=arr1[i];
                var option1=document.createElement("option");
                var text1=document.createTextNode(value1);
                option1.appendChild(text1);
                cityId.appendChild(option1);

            }

        }

    }

}