jQuery城市二级联动_js省市区三级联动插件
2017-08-10 13:48:05 By: shinyuu
分享一个jQuery手机省市区三级联动代码、Demo是一款手机移动端购物网站常用省市区三级收货地址jQuery特效代码、风格是模仿IOS的风格、外观非常好看、有图有真相
使用也非常简单
1、引入JS文件
<script src="js/picker.min.js"></script> <script src="js/city.js"></script>
2、点击入口
<div class="container"> <div class="row main"> <div class="col-md-12"> <div class="row" style="margin-top: 30px; text-align: center;"> <a href="#" class="btn btn-info btn-lg active" role="button" id="sel_city">点击选取省市区县</a> </div> </div> </div> </div>
3、js代码
var nameEl = document.getElementById(´sel_city´); var first = []; /* 省,直辖市 */ var second = []; /* 市 */ var third = []; /* 镇 */ var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */ var checked = [0, 0, 0]; /* 已选选项 */ function creatList(obj, list){ obj.forEach(function(item, index, arr){ var temp = new Object(); temp.text = item.name; temp.value = index; list.push(temp); }) } creatList(city, first); if (city[selectedIndex[0]].hasOwnProperty(´sub´)) { creatList(city[selectedIndex[0]].sub, second); } else { second = [{text: ´´, value: 0}]; } if (city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty(´sub´)) { creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third); } else { third = [{text: ´´, value: 0}]; } var picker = new Picker({ data: [first, second, third], selectedIndex: selectedIndex, title: ´地址选择´ }); picker.on(´picker.select´, function (selectedVal, selectedIndex) { var text1 = first[selectedIndex[0]].text; var text2 = second[selectedIndex[1]].text; var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : ´´; nameEl.innerText = text1 ´ ´ text2 ´ ´ text3; }); picker.on(´picker.change´, function (index, selectedIndex) { if (index === 0){ firstChange(); } else if (index === 1) { secondChange(); } function firstChange() { second = []; third = []; checked[0] = selectedIndex; var firstCity = city[selectedIndex]; if (firstCity.hasOwnProperty(´sub´)) { creatList(firstCity.sub, second); var secondCity = city[selectedIndex].sub[0] if (secondCity.hasOwnProperty(´sub´)) { creatList(secondCity.sub, third); } else { third = [{text: ´´, value: 0}]; checked[2] = 0; } } else { second = [{text: ´´, value: 0}]; third = [{text: ´´, value: 0}]; checked[1] = 0; checked[2] = 0; } picker.refillColumn(1, second); picker.refillColumn(2, third); picker.scrollColumn(1, 0) picker.scrollColumn(2, 0) } function secondChange() { third = []; checked[1] = selectedIndex; var first_index = checked[0]; if (city[first_index].sub[selectedIndex].hasOwnProperty(´sub´)) { var secondCity = city[first_index].sub[selectedIndex]; creatList(secondCity.sub, third); picker.refillColumn(2, third); picker.scrollColumn(2, 0) } else { third = [{text: ´´, value: 0}]; checked[2] = 0; picker.refillColumn(2, third); picker.scrollColumn(2, 0) } } }); picker.on(´picker.valuechange´, function (selectedVal, selectedIndex) { console.log(selectedVal); console.log(selectedIndex); }); nameEl.addEventListener(´click´, function () { picker.show(); });
jquery实现省市区三级联动源代码下载链接: jquery省市区三级联动 密码: rkp7
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)
或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛