当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 收货地址的JavaScript城市三级联动【干货拿走不谢！＞_＜】

收货地址的JavaScript城市三级联动【干货拿走不谢！＞_＜】

2020年07月07日  | 移动技术网IT编程  | 我要评论

城市三级联动
在我们网上购物时会有收货地址一栏让我们选择收货地址，当中有省、市、区等选择项，如下图：

在添加收货地址时我们会先选择省再选市最后选所在区，这些都是下拉列表式的选择，选择完成才会填写具体地址。
这时在我们平时练习时，代码如下：

//html
    省：<select name="" id="sname" >
        <option value="">----请选择----</option>
         <option value="">----湖北----</option>
    </select>
    市：<select name="" id="citys" >
        <option value="">----武昌----</option>
         <option value="">----江汉----</option>
          <option value="">----汉口----</option>
    </select>
    区：<select name="" id="name" >
        <option value="">----洪山----</option>
         <option value="">----青山----</option>
          <option value="">----江岸----</option>
    </select>

或者是

//html
    省：<select name="" id="sname" >
        <option value="">----请选择----</option>
       
    </select>
    市：<select name="" id="City" >
        <option value="">----请选择----</option>
    </select>
    区：<select name="" id="Name" >
        <option value="">----请选择----</option>
    </select>

//js代码

<script>
        var sheng=["陕西省","四川省"];
     var city=[
           ["西安市","渭南市","宝鸡市"],
           ["成都市","绵阳市"]
     ]
    var qu=[
            [
                ["莲湖区","雁塔区","长安区"],
                ["渭南1区","渭南2区","渭南3区"],
                ["成仓区","金台区","高新区"],
            ],
            [
                    ["成都1区","成都2区","成都3区"],
                    ["绵阳1区","绵阳2区","绵阳3区"]
            ]
    ]
   //先获取
    var s=document.getElementById("sname");
    var s_city=document.getElementById("City");
    var q_name=document.getElementById("Name");
    //for循环使js里的sheng元素添加到s里
    for(var i=0;i<sheng.length;i++)
    {
        var option=new Option(sheng[i],i);
        s.appendChild(option);
    }
    //选择事件
     var qucity;
     s.onchange=function (){
         s_city.options.length=1;
         q_name.options.length=1;
         var index=this.value;
         var shi=city[index];
         qucity=qu[index];
         for(var i=0;i<shi.length;i++)
         {
            var option=new Option(shi[i],i);
             s_city.appendChild(option)
         }
     }
     s_city.onchange=function (){
         q_name.options.length=1;
         var index=this.value;
         var squ=qucity[index];
         for(var i=0;i<squ.length;i++)
         {
            var option=new Option(squ[i],i);
             q_name.appendChild(option);
         }
     }

    </script>

在实际开发中全国或全球地址不可能全去敲出来，这时我们就要用到一个jQuery插件
＜script src=“jquery.js”></script＞这时我们就会少很多代码量，节省开发时间。

实际开发 中地址html代码如下：

 <div data-toggle="distpicker" data-autoselect="3">
        地&emsp;址： 
            <select v-model="work.province"></select>
            <select v-model="work.city"></select> 
            <select v-model="work.area"></select>
    </div>

这时只需引入jQ插件就好，简单又方便，如下：

//js
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/distpicker/2.0.1/distpicker.js"></script>

这里引用的网络地址，可以直接用，也可以下载到你的本地在链入代码。
注意!
实际开发中需要问清楚这种插件的运用方式。

最终示例：

选择省份
选择市
选择区
都看到这里了，请给我一种鼓励↓↓↓ ＞_＜

本文地址：https://blog.csdn.net/m0_47708359/article/details/107164823

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网