省市区三级联动--移动端

最新推荐文章于 2026-04-03 23:25:25 发布

原创最新推荐文章于 2026-04-03 23:25:25 发布 · 4k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js #三级联动

常用插件专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在移动端实现省市区三级联动效果，无需付费插件，通过js和city.js数据实现。提供html和mobileSelect.js代码示例，并提醒读者可以自定义样式，但推荐使用现有样式库。

随着信息时代的发展，我们已经可以足不出户就建议购买到我们想要的东西，这个想必不需要我多说，大家都知道也切身体会到，在使用这些APP的中不可避免的就是我们的地址，小编在做需求时看到了这一项，所以到插件库找了一下，发现下载是需要money滴，奈何小编是个穷X，没钱购买，所以只能自己动手了。话不多说，代码为重。
html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge chrome=1">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body class="address">
     <div class="city"> <a href="#"  role="button" id="sel_city">所在地区</a></div>
     <script src="js/jquery-1.8.3.min.js"></script> 
     <script src="js/picker.js"></script>
     <script src="js/city.js"></script>
     <script src="js/mobileSelect.js"></script>
    
</body>
</html>

mobileSelect.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();
});

注：
1、picker.js请自行上网查询下载，若需要的同学也可以自己写样式，但小编不推荐，有现成的，为啥不用，还要多此一举呢
2、city.js数据太大，小编就不贴出了，只贴出数据结构，请谅解

var city = [
  {
    "name": "东北地区",
    "sub": [
      {
        "name": "黑龙江",
        "sub":[
        	{"name":"1111"},
        	{"name":"2222"}
        ],
        "type": 0
      },
      {
        "name": "吉林",
         "sub":[
         	{"name":"333"}
         ],
        "type": 0
      },
      {
        "name": "辽宁",
        "sub":[],
        "type": 0
      }
    ],
    "type": 1
  }
  ]

效果图：
在这里插入图片描述