jQuery城市二级联动_js省市区三级联动插件
2017-08-10 13:48:05  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 2936
• 0

分享一个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的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛