三级联动:js实现淘宝地址更改

本文介绍如何利用JavaScript实现类似淘宝收获地址选择的三级联动效果。在省份变化时,城市和乡镇自动更新。通过解析存储在JSON对象中的地址信息,实现动态加载。虽然整理大量数据时较为繁琐,但理解原理后并不复杂。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在淘宝购物的时候,我们经常会遇到收获地址的选择,当省份发生改变时,城市,乡镇会随之发生改变。
这个三级联动的效果我们可以通过js来实现。
在写这个案例时,博主将地址的信息存储在了一个json对象中,并把json对象存在了一个js文件中,存储地址信息的js文件可以去博主的资源中下载哦~~

效果图:

这里写图片描述

html及css代码如下:

<!-- css代码-->
<style>
        *{margin: 0;padding:0;}
        .main{overflow: hidden;width:650px;margin: 100px auto;}
        select{display: inline-block;width:100px;height: 30px;line-height: 30px;margin: 10px 28px;}
        #d-s{display: inline-block;}
    </style>
  <!-- html代码-->
<div class="main">
    <select id="provence"><option value="-1">请选择</option></select> 省份
    <select id="city"><option value="-1">请选择</option></select> 城市
    <div id="d-s"><select id="street"><option value="-1">请选择</option></select> 县区</div>
</div>

接下来,重头戏来啦,js代码:

<script src="js/citylist.js"></script>
<script>
    var ps = document.getElementById('provence');
    var cs = document.getElementById('city');
    var ss = document.getElementById('street');
    var ds = document.getElementById("d-s")
    var Val = '<option value="-1">请选择</option>';

    for(var i=0;i<json.citylist.length;i++){
    //从json数组中获取所有省、直辖市,并且添加到下拉框中
        ps.innerHTML += "<option value = "+ i + ">" + json.citylist[i].p + "</option>";
    }
    //省下拉框的改变事件
    ps.onchange = function(){
        Val = '<option value="-1">请选择</option>';
        //这一段if-else代码是为了判断是否为直辖市,如果为直辖市,则最后一个县区的下拉框隐藏
        if(json.citylist[ps.value].c[0].a == undefined){
            ds.style.display='none';
        }else{
            ds.style.display='inline-block';
        }
        if(ps.value == -1){
            cs.innerHTML= Val;
        }
        for(var j=0;j<json.citylist[ps.value].c.length;j++) {
            Val += "<option value = " + j + ">" + json.citylist[ps.value].c[j].n + "</option>";
            cs.innerHTML = Val;
        }
        ss.innerHTML = '<option value="-1">请选择</option>';
    }
//城市下拉框的改变事件
    cs.onchange = function(){
    //当选中的省不是直辖市时,才会运行此函数
        if(ss.style.display == "inline-block"){
            Val = '<option value="-1">请选择</option>';
            if(ps.value == -1 || cs.value== -1){
                ss.innerHTML= Val;
            }
            for(var j=0;j<json.citylist[ps.value].c[cs.value].a.length;j++){
                Val += "<option value = " + j + ">" + json.citylist[ps.value].c[cs.value].a[j].s + "</option>";
                ss.innerHTML = Val;
            }
        }
    }

博主觉得,其实这个效果搞清楚了实现原理,并不是很困难,就是因为数据的信息量太大,所以在整理json对象中的数据时,会很头疼,需要费点神。谁让博主是个心细如尘的妹子(哈哈哈~)呢,这点小事自然难不倒我啦~

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值