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

参考网址

https://blog.csdn.net/weixin_39706415/article/details/83991137

效果

下载源码之后，引入js,css 立马就能用
但它html 页面中 只 打印出了 省市区 的数字组合，比如0,0,0
插入数据库的时候，是数字，可以根据数字进行 搜索同一城市的数据

但如果我想在页面显示所在地的话，就必须是 汉字城市名，存入数据库

我想要的是城市名，所以我 修改了 引入的 js 方法

片段如下

key: "_bindEvent",
			value: function() {
				var e = this;
				(0, f.addEvent)(this.pickerEl, "touchmove", function(e) {
					e.preventDefault()
				}), (0, f.addEvent)(this.confirmEl, "click", function() {
					e.hide();
					
					var shu = [];         // 三级城市名称，组合
					for(var t = !1, i = 0; i < e.data.length; i++) {
						var n = e.wheels[i].getSelectedIndex();
						e.selectedIndex[i] = n;
						var r = null;

						var location = e.data[i][n].text;
						shu[i] = location;
						
						// console.log(e.data[i][n].text);  // 城市名
						// console.log(e.data[i][n].value);  // 城市 id
						e.data[i].length && (r = e.data[i][n].value), e.selectedVal[i] !== r && (t = !0), e.selectedVal[i] = r  
						
						
						// console.log(e.selectedIndex);
						// console.log(n);  // 每次循环出一个数字0 2 0 ，总的是020
						// console.log(shu);
					}

					// 打印
					// console.log(shu);
				
					// 传参数给 html 页面的 picker.valuechange 方法

					e.trigger("picker.select", e.selectedVal, e.selectedIndex), t && e.trigger("picker.valuechange", e.selectedVal, e.selectedIndex,shu)
				}), (0, f.addEvent)(this.cancelEl, "click", function() {
					e.hide(), e.trigger("picker.cancel")
				})
			}
		}, {
			key: "_createWheel",

修改 js 中传的参数之后，html页面 就可以打印出 城市名了

// 第二个行为 ，这是 picker.min.js 中调的方法，参数是从js 中传过来的
picker.on('picker.valuechange', function (selectedVal, selectedIndex,shu) {

  // 打印出来 [0, 2, 0]，那我数据库，直接存这个字段，搜索的时候，再分割判断，
  // 存数据库，存这个数组，筛选的时候，就根据数组去表里查
  // console.log(selectedVal);
  console.log(selectedIndex);   // 选择地区的  数字
  
  // console.log(shu);       // 选择地区的  城市名
  
  )}