小程序如何进行地区选择器实现、调用？

本篇文章给大家带来的内容是关于小程序如何进行地区选择器 实现、调用，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

region-widget.js

var api = require(&＃39;../../../utils/api/index.js&＃39;);var cOnstants= require(&＃39;../../../utils/api/lib/constants&＃39;);var raw = require(&＃39;../../../utils/citys&＃39;);

Component({
  options: {
    multipleSlots: true
  },
  data: {
    select:[0,0],
    region: [Object.keys(raw), raw[Object.keys(raw)[0]]],
    province:"",
    city:""
  },
  properties: {
    target: {
      type: Array,
      value: [],
      observer: &＃39;update&＃39;
    }
  },
  methods: {
    update: function (newVal, oldVal) {
      if(!newVal || newVal.length <2)return;      var province = newVal[0];      var city = newVal[1];      var region = this.data.region;      //update province
      var pro_index = region[0].indexOf(province);      if (pro_index <0)return;
      region = [region[0], raw[province]];      //update city
      var city_index = region[1].indexOf(city);      if (city_index <0) return;      this.setData({
        select: [pro_index,city_index],
        region: region,
        province: province,
        city: city
      })
    },
    bindChange: function (e) {
      if (!e.detail.value || e.detail.value.length <2)return;      var region = this.data.region;      var pro_index = e.detail.value[0];      var city_index = e.detail.value[1];      this.setData({
        province: region[0][pro_index],
        city: region[1][city_index]
      })      this.notify();
    },
    bindColumnChange: function (e) {
      if (e.detail.column === 0) {        var region = this.data.region;        var province = region[0][e.detail.value];        this.setData({ 
          region: [region[0], raw[province]] 
        });
      }
    },
    notify() {      this.triggerEvent(&＃39;regionChange&＃39;, { province: this.data.province, city: this.data.city }, {})
    }
  }
})

region-widget.wxml

city.js

var citys = {  &＃39;北京市&＃39;: [&＃39;市辖区&＃39;],  &＃39;天津市&＃39;: [&＃39;市辖区&＃39;],
  &＃39;河北省&＃39;: [&＃39;石家庄市&＃39;, &＃39;唐山市&＃39;, &＃39;秦皇岛市&＃39;, &＃39;邯郸市&＃39;, &＃39;邢台市&＃39;, &＃39;保定市&＃39;, &＃39;张家口市&＃39;, &＃39;承德市&＃39;, &＃39;沧州市&＃39;, 
          &＃39;廊坊市&＃39;, &＃39;衡水市&＃39;, &＃39;省直辖县级行政区划&＃39;], 
 &＃39;山西省&＃39;: [&＃39;太原市&＃39;, &＃39;大同市&＃39;, &＃39;阳泉市&＃39;, &＃39;长治市&＃39;, &＃39;晋城市&＃39;, &＃39;朔州市&＃39;, &＃39;晋中市&＃39;,
           &＃39;运城市&＃39;, &＃39;忻州市&＃39;, &＃39;临汾市&＃39;, &＃39;吕梁市&＃39;],
 &＃39;内蒙古自治区&＃39;: [&＃39;呼和浩特市&＃39;, &＃39;包头市&＃39;, &＃39;乌海市&＃39;, &＃39;赤峰市&＃39;, &＃39;通辽市&＃39;, &＃39;鄂尔多斯市&＃39;, &＃39;呼伦贝尔市&＃39;,
                &＃39;巴彦淖尔市&＃39;, &＃39;乌兰察布市&＃39;, &＃39;兴安盟&＃39;, &＃39;锡林郭勒盟&＃39;, &＃39;阿拉善盟&＃39;],  
 &＃39;辽宁省&＃39;: [&＃39;沈阳市&＃39;, &＃39;大连市&＃39;, &＃39;鞍山市&＃39;, &＃39;抚顺市&＃39;, &＃39;本溪市&＃39;, &＃39;丹东市&＃39;, &＃39;锦州市&＃39;, &＃39;营口市&＃39;, &＃39;阜新市&＃39;, &＃39;辽阳市&＃39;,
             &＃39;盘锦市&＃39;, &＃39;铁岭市&＃39;, &＃39;朝阳市&＃39;, &＃39;葫芦岛市&＃39;],  
  &＃39;吉林省&＃39;: [&＃39;长春市&＃39;, &＃39;吉林市&＃39;, &＃39;四平市&＃39;, &＃39;辽源市&＃39;, &＃39;通化市&＃39;, &＃39;白山市&＃39;, &＃39;松原市&＃39;, &＃39;白城市&＃39;, &＃39;延边朝鲜族自治州&＃39;], 
 &＃39;黑龙江省&＃39;: [&＃39;哈尔滨市&＃39;, &＃39;齐齐哈尔市&＃39;, &＃39;鸡西市&＃39;, &＃39;鹤岗市&＃39;, &＃39;双鸭山市&＃39;, &＃39;大庆市&＃39;, &＃39;伊春市&＃39;, &＃39;佳木斯市&＃39;,
              &＃39;七台河市&＃39;, &＃39;牡丹江市&＃39;, &＃39;黑河市&＃39;, &＃39;绥化市&＃39;, &＃39;大兴安岭地区&＃39;], 
 &＃39;上海市&＃39;: [&＃39;市辖区&＃39;],  
 &＃39;江苏省&＃39;: [&＃39;南京市&＃39;, &＃39;无锡市&＃39;, &＃39;徐州市&＃39;, &＃39;常州市&＃39;, &＃39;苏州市&＃39;, &＃39;南通市&＃39;, &＃39;连云港市&＃39;, &＃39;淮安市&＃39;, &＃39;盐城市&＃39;, &＃39;扬州市&＃39;, 
           &＃39;镇江市&＃39;, &＃39;泰州市&＃39;, &＃39;宿迁市&＃39;],  
 &＃39;浙江省&＃39;: [&＃39;杭州市&＃39;, &＃39;宁波市&＃39;, &＃39;温州市&＃39;, &＃39;嘉兴市&＃39;, &＃39;湖州市&＃39;, &＃39;绍兴市&＃39;, &＃39;金华市&＃39;, &＃39;衢州市&＃39;, &＃39;舟山市&＃39;, &＃39;台州市&＃39;, 
           &＃39;丽水市&＃39;], 
 &＃39;安徽省&＃39;: [&＃39;合肥市&＃39;, &＃39;芜湖市&＃39;, &＃39;蚌埠市&＃39;, &＃39;淮南市&＃39;, &＃39;马鞍山市&＃39;, &＃39;淮北市&＃39;, &＃39;铜陵市&＃39;, &＃39;安庆市&＃39;, &＃39;黄山市&＃39;,
            &＃39;滁州市&＃39;, &＃39;阜阳市&＃39;, &＃39;宿州市&＃39;, &＃39;六安市&＃39;, &＃39;亳州市&＃39;, &＃39;池州市&＃39;, &＃39;宣城市&＃39;], 
 &＃39;福建省&＃39;: [&＃39;福州市&＃39;, &＃39;厦门市&＃39;, &＃39;莆田市&＃39;, &＃39;三明市&＃39;, &＃39;泉州市&＃39;, &＃39;漳州市&＃39;, &＃39;南平市&＃39;, &＃39;龙岩市&＃39;, &＃39;宁德市&＃39;],  
 &＃39;江西省&＃39;: [&＃39;南昌市&＃39;, &＃39;景德镇市&＃39;, &＃39;萍乡市&＃39;, &＃39;九江市&＃39;, &＃39;新余市&＃39;, &＃39;鹰潭市&＃39;, &＃39;赣州市&＃39;, &＃39;吉安市&＃39;, &＃39;宜春市&＃39;, &＃39;抚州市&＃39;,
            &＃39;上饶市&＃39;], 
   &＃39;山东省&＃39;: [&＃39;济南市&＃39;, &＃39;青岛市&＃39;, &＃39;淄博市&＃39;, &＃39;枣庄市&＃39;, &＃39;东营市&＃39;, &＃39;烟台市&＃39;, &＃39;潍坊市&＃39;, &＃39;济宁市&＃39;,
                 &＃39;泰安市&＃39;, &＃39;威海市&＃39;, &＃39;日照市&＃39;, &＃39;莱芜市&＃39;, &＃39;临沂市&＃39;, &＃39;德州市&＃39;, &＃39;聊城市&＃39;, &＃39;滨州市&＃39;, &＃39;菏泽市&＃39;], 
   &＃39;河南省&＃39;: [&＃39;郑州市&＃39;, &＃39;开封市&＃39;, &＃39;洛阳市&＃39;, &＃39;平顶山市&＃39;, &＃39;安阳市&＃39;, &＃39;鹤壁市&＃39;, &＃39;新乡市&＃39;, &＃39;焦作市&＃39;, &＃39;濮阳市&＃39;,
              &＃39;许昌市&＃39;, &＃39;漯河市&＃39;, &＃39;三门峡市&＃39;, &＃39;南阳市&＃39;, &＃39;商丘市&＃39;, &＃39;信阳市&＃39;, &＃39;周口市&＃39;, &＃39;驻马店市&＃39;, &＃39;省直辖县级行政区划&＃39;], 
   &＃39;湖北省&＃39;: [&＃39;武汉市&＃39;, &＃39;黄石市&＃39;, &＃39;十堰市&＃39;, &＃39;宜昌市&＃39;, &＃39;襄阳市&＃39;, &＃39;鄂州市&＃39;, &＃39;荆门市&＃39;, &＃39;孝感市&＃39;, &＃39;荆州市&＃39;, &＃39;黄冈市&＃39;,
             &＃39;咸宁市&＃39;, &＃39;随州市&＃39;, &＃39;恩施土家族苗族自治州&＃39;, &＃39;省直辖县级行政区划&＃39;],  
    &＃39;湖南省&＃39;: [&＃39;长沙市&＃39;, &＃39;株洲市&＃39;, &＃39;湘潭市&＃39;, &＃39;衡阳市&＃39;, &＃39;邵阳市&＃39;, &＃39;岳阳市&＃39;, &＃39;常德市&＃39;, &＃39;张家界市&＃39;, &＃39;益阳市&＃39;, &＃39;郴州市&＃39;,
               &＃39;永州市&＃39;, &＃39;怀化市&＃39;, &＃39;娄底市&＃39;, &＃39;湘西土家族苗族自治州&＃39;],  
    &＃39;广东省&＃39;: [&＃39;广州市&＃39;, &＃39;韶关市&＃39;, &＃39;深圳市&＃39;, &＃39;珠海市&＃39;, &＃39;汕头市&＃39;, &＃39;佛山市&＃39;, &＃39;江门市&＃39;, &＃39;湛江市&＃39;, &＃39;茂名市&＃39;, &＃39;肇庆市&＃39;,
              &＃39;惠州市&＃39;, &＃39;梅州市&＃39;, &＃39;汕尾市&＃39;, &＃39;河源市&＃39;, &＃39;阳江市&＃39;, &＃39;清远市&＃39;, &＃39;东莞市&＃39;, &＃39;中山市&＃39;, &＃39;潮州市&＃39;, &＃39;揭阳市&＃39;,
               &＃39;云浮市&＃39;], 
   &＃39;广西壮族自治区&＃39;: [&＃39;南宁市&＃39;, &＃39;柳州市&＃39;, &＃39;桂林市&＃39;, &＃39;梧州市&＃39;, &＃39;北海市&＃39;, &＃39;防城港市&＃39;, &＃39;钦州市&＃39;, &＃39;贵港市&＃39;, &＃39;玉林市&＃39;,
             &＃39;百色市&＃39;, &＃39;贺州市&＃39;, &＃39;河池市&＃39;, &＃39;来宾市&＃39;, &＃39;崇左市&＃39;], 
  &＃39;海南省&＃39;: [&＃39;海口市&＃39;, &＃39;三亚市&＃39;, &＃39;三沙市&＃39;, &＃39;儋州市&＃39;, &＃39;省直辖县级行政区划&＃39;],  
  &＃39;重庆市&＃39;: [&＃39;市辖区&＃39;, &＃39;县&＃39;],  
  &＃39;四川省&＃39;: [&＃39;成都市&＃39;, &＃39;自贡市&＃39;, &＃39;攀枝花市&＃39;, &＃39;泸州市&＃39;, &＃39;德阳市&＃39;, &＃39;绵阳市&＃39;, &＃39;广元市&＃39;, &＃39;遂宁市&＃39;, &＃39;内江市&＃39;, &＃39;乐山市&＃39;,
               &＃39;南充市&＃39;, &＃39;眉山市&＃39;, &＃39;宜宾市&＃39;, &＃39;广安市&＃39;, &＃39;达州市&＃39;, &＃39;雅安市&＃39;, &＃39;巴中市&＃39;, &＃39;资阳市&＃39;, &＃39;阿坝藏族羌族自治州&＃39;, 
               &＃39;甘孜藏族自治州&＃39;, &＃39;凉山彝族自治州&＃39;],  
    &＃39;贵州省&＃39;: [&＃39;贵阳市&＃39;, &＃39;六盘水市&＃39;, &＃39;遵义市&＃39;, &＃39;安顺市&＃39;, &＃39;毕节市&＃39;, &＃39;铜仁市&＃39;, &＃39;黔西南布依族苗族自治州&＃39;,
             &＃39;黔东南苗族侗族自治州&＃39;, &＃39;黔南布依族苗族自治州&＃39;], 
   &＃39;云南省&＃39;: [&＃39;昆明市&＃39;, &＃39;曲靖市&＃39;, &＃39;玉溪市&＃39;, &＃39;保山市&＃39;, &＃39;昭通市&＃39;, &＃39;丽江市&＃39;, &＃39;普洱市&＃39;, &＃39;临沧市&＃39;, &＃39;楚雄彝族自治州&＃39;,
             &＃39;红河哈尼族彝族自治州&＃39;, &＃39;文山壮族苗族自治州&＃39;, &＃39;西双版纳傣族自治州&＃39;, &＃39;大理白族自治州&＃39;, 
             &＃39;德宏傣族景颇族自治州&＃39;, &＃39;怒江傈僳族自治州&＃39;, &＃39;迪庆藏族自治州&＃39;],  
  &＃39;西藏自治区&＃39;: [&＃39;拉萨市&＃39;, &＃39;日喀则市&＃39;, &＃39;昌都市&＃39;, &＃39;林芝市&＃39;, &＃39;山南市&＃39;, &＃39;那曲地区&＃39;, &＃39;阿里地区&＃39;], 
   &＃39;陕西省&＃39;: [&＃39;西安市&＃39;, &＃39;铜川市&＃39;, &＃39;宝鸡市&＃39;, &＃39;咸阳市&＃39;, &＃39;渭南市&＃39;, &＃39;延安市&＃39;, &＃39;汉中市&＃39;, &＃39;榆林市&＃39;, &＃39;安康市&＃39;, &＃39;商洛市&＃39;],
  &＃39;甘肃省&＃39;: [&＃39;兰州市&＃39;, &＃39;嘉峪关市&＃39;, &＃39;金昌市&＃39;, &＃39;白银市&＃39;, &＃39;天水市&＃39;, &＃39;武威市&＃39;, &＃39;张掖市&＃39;, &＃39;平凉市&＃39;, &＃39;酒泉市&＃39;, &＃39;庆阳市&＃39;, 
              &＃39;定西市&＃39;, &＃39;陇南市&＃39;, &＃39;临夏回族自治州&＃39;, &＃39;甘南藏族自治州&＃39;], 
   &＃39;青海省&＃39;: [&＃39;西宁市&＃39;, &＃39;海东市&＃39;, &＃39;海北藏族自治州&＃39;, &＃39;黄南藏族自治州&＃39;, &＃39;海南藏族自治州&＃39;, &＃39;果洛藏族自治州&＃39;,
             &＃39;玉树藏族自治州&＃39;, &＃39;海西蒙古族藏族自治州&＃39;],  
    &＃39;宁夏回族自治区&＃39;: [&＃39;银川市&＃39;, &＃39;石嘴山市&＃39;, &＃39;吴忠市&＃39;, &＃39;固原市&＃39;, &＃39;中卫市&＃39;], 
  &＃39;新疆维吾尔自治区&＃39;: [&＃39;乌鲁木齐市&＃39;, &＃39;克拉玛依市&＃39;, &＃39;吐鲁番市&＃39;, &＃39;哈密市&＃39;, &＃39;昌吉回族自治州&＃39;,
                   &＃39;博尔塔拉蒙古自治州&＃39;, &＃39;巴音郭楞蒙古自治州&＃39;, &＃39;阿克苏地区&＃39;, &＃39;克孜勒苏柯尔克孜自治州&＃39;,
                    &＃39;喀什地区&＃39;, &＃39;和田地区&＃39;, &＃39;伊犁哈萨克自治州&＃39;, &＃39;塔城地区&＃39;, &＃39;阿勒泰地区&＃39;, &＃39;自治区直辖县级行政区划&＃39;], 
     &＃39;台湾省&＃39;: [&＃39;台湾&＃39;], 
      &＃39;香港特别行政区&＃39;: [&＃39;香港&＃39;], 
       &＃39;澳门特别行政区&＃39;: [&＃39;澳门&＃39;]
}module.exports = citys;

用的时候这样用：

    {{select[0]}}{{select[1]}}

Page({
  data: {
      select:["",""]
  },
  onRegionChange:function(e){
    console.log(e.detail);
    this.setData({select: [e.detail.province, e.detail.city]})
  }  ...}

以上就是小程序如何进行地区选择器 实现、调用？的详细内容，更多请关注其它相关文章！