js实现移动端省市区三级联动选择器（附源码）

浅浅的花香味﹌ 2022-04-16 21:20 223阅读 0赞

**项目演示地址**

[https://www.gomyorder.cn/city/index.html][https_www.gomyorder.cn_city_index.html]

### 效果图: ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ_size_16_color_FFFFFF_t_70][]

###  核心代码： ###

<script>
    		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();
    		});
    		</script>

关注公众号【码兄】回复【666】获取免费下载地址

![20191014094809562.png][]

[https_www.gomyorder.cn_city_index.html]: https://www.gomyorder.cn/city/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ_size_16_color_FFFFFF_t_70]: /images/20220417/5dc98a600fb44809aaec9405fa25eca3.png
[20191014094809562.png]: /images/20220417/d0e3cb7f3e074ef09054546968fc27c5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读

相关省市区三级联动

**目录** 省市区三级联动 1.1、省份的获取和显示 1.2、市的获取和显示 1.3、县区的获取与显示 1.4、接口 1.41、获取省份 1.42、获...

分手后的思念是犯贱/ 2024年04月17日 21:39/ 0 赞/ 246 阅读

相关 JS实现省市区三级联动

目标：用JS实现省市区的三级联动效果 -------------------- 学习内容： 1. 掌握JS对DOM元素的获取 2. 掌握 JS对DO

àì夳堔傛蜴生んèń/ 2024年04月08日 12:46/ 0 赞/ 183 阅读

相关 java实现省市区三级联动

我搭建的是SSM 框架：一、实现三级联动以省市区为例：我的想法很简单，可能想的有点少，首先遍历省份，当数据发生改变调用方法请求根据省的id去查询市区的信息，

╰+哭是因爲堅強的太久メ/ 2023年07月01日 05:30/ 0 赞/ 119 阅读

相关 jquery实现省市区三级联动

jquery实现省市区三级联动 -------------------- 实现的图片先附上 ![在这里插入图片描述][watermark_type_ZmFuZ3po

约定不等于承诺〃/ 2023年06月09日 12:27/ 0 赞/ 286 阅读

相关省市区三级联动菜单（附数据库）

\[php\] [view plain][] [copy][view plain] 1. <html> 2. <head> 3. <meta http-equiv=

悠悠/ 2022年08月27日 05:49/ 0 赞/ 224 阅读

相关 js 省市区三级（二级）联动

1,最近项目用到了省市区三级联动，起初想通过json的方式来实现，无意中碰到了这个，还挺好用的，记录下来，方便自己也方便别人。 2，因为项目前台框架为bootstrap所以没

清疚/ 2022年07月17日 03:28/ 0 赞/ 445 阅读

相关 js实现移动端省市区三级联动选择器（附源码）

项目演示地址 [https://www.gomyorder.cn/city/index.html][https_www.gomyorder.cn_city_index.htm

浅浅的花香味﹌/ 2022年04月16日 21:20/ 0 赞/ 224 阅读

相关省市区三级联动

下载地址：[https://download.csdn.net/download/qzc2017/10879818][https_download.csdn.net_downl

谁借莪１个温暖的怀抱￠/ 2022年04月02日 15:22/ 0 赞/ 663 阅读

相关 HTML+JS实现省市区三级联动

在线调试预览 https://codepen.io/acelibin/pen/wGooev 1.html代码 <html> <head></

﹏ヽ暗。殇╰゛Y/ 2021年12月11日 05:05/ 0 赞/ 799 阅读

相关 js实现Ajax三级联动,省市区

首先我们先看样例: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

拼搏现实的明天。/ 2021年11月22日 03:14/ 0 赞/ 696 阅读