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

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

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

//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>

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

最终示例：

都看到这里了，请给我一种鼓励↓↓↓ ＞_＜

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

html5手机端三级联动城市选择代码,省市县三级联动(jQuery手机端收货地址选择地区代码)...
[实例简介] [实例截图] [核心代码] jQuery手机端收货地址选择代码 - 站长素材默认调用所在地区: 设置默认值所在地区: /** * 默认调用 */ !function () { va ...
仿京东收货地址三级联动
声明我没有用tabLayout(pageSlidingTabStrip) + viewpager + fragment 如果用上面的方法实现更加简单我用的是一个listvi ...
写收货地址代码模块的思路整理——省市联动
最近,一个同事接到一个开发任务,其中有一个功能模块就是关于收货地址的,在收货地址的回显上遇到了一些麻烦,因为我之前做过收货地址的模块,因此将经验总结于下,供大家参考: 所用技术:AngularJs 一 ...
php商城手机端省市显示,jQuery仿手机京东商城收货地址城市选择
jQuery仿手机京东商城收货地址城市选择 js代码 /** * 默认调用 */ !function () { var $target = $('#J_Address'); $target.cityS ...
微信小程序实现收货地址城市选择效果(添加收货地址)
先来张效果图这里主要是城市选择效果,请忽视其他,不要吐槽,谢谢接下来看一下代码吧 wxml  < ...
微信小程序-收货地址省市区联动组件
简单记录直接上代码思路自己理: addressEditor.wxml <view class=&qu ...
智能识别收货地址（支持vue）/省市区街道四级联动
一.智能识别收货地址解决方案一:smartParsePro 源代码地址: https://github.com/wzc570738205/smartParsePro 使用方法1,在线API: 特别提 ...
美多商城之用户中心(收货地址1)
三.收货地址用户地址的主要业务逻辑有: 展示省市区数据用户地址的增删改查处理设置默认地址设置地址标题 3.1 省市区三级联动 1. 展示收货地址界面提示: 省市区数据是在收货地址界面展示的, ...
Android仿京东收货地址
Android仿京东三级联动收货地址 1.在本地新建assets目录,存放三级联动json数据,取本地json数据作为数据源 String data = com.miles.zcstc.fingerd ...

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

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

最新文章

热门文章