仿三级联动

最新推荐文章于 2021-06-07 17:53:51 发布

人终将被少年不得之物困扰一生

最新推荐文章于 2021-06-07 17:53:51 发布

阅读量230

点赞数 1

本文链接：https://blog.csdn.net/weixin_43889484/article/details/104033147

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
<select id="province">
    <option value="">-请选择-</option><!--先创建三个下拉栏，分别对应 省 市 县-->
</select>

<select id="city">
    <option value="">-请选择-</option>
</select>

<select id="area">
    <option value="">-请选择-</option>
</select>
<script>
    var province =document.getElementById("province");
    var city=document.getElementById("city");
    var area=document.getElementById("area");

    var arr_province=["陕西省","云南省","四川省","山西省"];

    var arr_city=[
        ["西安市","咸阳市","宝鸡市","渭南市"],
        ["昆明市","大理市","丽江市","西双版纳市"],
        ["内江市","成都市","泸州市","资阳市"],
        ["太原市","屏显市","乐宝市","李伟市"]
    ];

    var arr_area=[
            [
                ["西安县1","西安县2"],["咸阳市1","咸阳市2"],["宝鸡市1","宝鸡市2"],["渭南市1","渭南市2"]
            ],
            [
                ["昆明市1","昆明市2"],["大理市1","大理市2"],["丽江市1","丽江市2"],["西双版纳市1","西双版纳市2"]
            ],
            [
                ["东兴区","市中区"],["双流区","金牛区"],["龙马潭区","江阳区"],["高新区","雁江区"]
            ],
            [
                ["太原市1","太原市2"],["屏显市1","屏显市2"],["乐宝市1","乐宝市2"],["李伟市1","李伟市2"]
            ]
    ];
    //定义一个全局对象，存储县的值
    var arr_middle;

    //进行函数封装
    function arr_linkage(arr,event){
        //进行循环遍历,这里的arr相当于上面的数组
        for(var i=0;i<arr.length;i++){
            //创建option
            var option=new Option(arr[i],i);
            //增加节点
            event.appendChild(option);
        }
    }
        //首先,arr_province相当于省的数组，province=select中选中的城市
        arr_linkage(arr_province,province);

        //首先点击某一个省时，可以改变市的option
        province.onchange=function(){
            //要把市和区重置
            city.options.length=1;
            area.options.length=1;
            var index=this.value;
            //对市的数组进行索引，oCity就是一个数组
            var oCity=arr_city[index];
            arr_middle=arr_area[index];
            arr_linkage(oCity,city);
        }
        //点击市之后，
        city.onchange=function(){
            //把区的option变为1；
            area.options.length=1;
            var index=this.value;
            //现在的arr_middle就是存储的是当前市所属的县的值
            var oArea=arr_middle[index]
            arr_linkage(oArea,area);
        }
    
</script>
</body>
</html>

这个也适合掌握基础的新手理解与运用。

人终将被少年不得之物困扰一生

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿三级联动

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>三级联动</title></head><body><select id="province"> <option va...
复制链接

扫一扫