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

在淘宝购物的时候，我们经常会遇到收获地址的选择，当省份发生改变时，城市，乡镇会随之发生改变。
这个三级联动的效果我们可以通过js来实现。
在写这个案例时，博主将地址的信息存储在了一个json对象中，并把json对象存在了一个js文件中，存储地址信息的js文件
下载地址：https://download.csdn.net/download/xiao__jia__jia/10701812
没有积分的，私我，我发给你，相互学习进步，和快乐。

没有jquery.js包的娃自己去官网下载。

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>首页</title>

		<link href="./AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="./AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css" />
		<script src="./AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="./AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>

	</head>

	<body>
	<!-- 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>


<script  src="./js/citylist.js"></script>
<script type="text/javascript">


    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>';

         
         $(function(){    
            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;
            }
            
           
        }else{
            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;
            }
        }
    }
</script>
</body>
</html>

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

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

猜你喜欢