素材网 素材网

jQuery手机全国省市区三级联动代码

下载资源()次

阅读次数()次

发布时间:2017-08-25

jQuery手机全国省市区三级联动代码
分享到:

用法简介:

来源:xw素材网


jQuery手机全国省市区三级联动代码。
文件引用:

<script src="js/picker.min.js"></script>

<script src="js/city.js"></script>

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


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。