两级联动
演示：
 
 
 
 
原理：
将数据库中的数据封装成对象，然后将对象转化为json数据，在客户端用异步获取后台的json数据即可。
客户端jsp页面：
 
 
 


后台：
 
 
 
注意：在js中如果某个元素还未被加载，那么只可以获得该元素的引用，不能对该元素进行绑定事件。

问题：

用weui做省市级联动，只涉及两级联动，采用的weui官方的picker组件，开始就是联动不起来，各种纠结，网上也没有找到答案，卡了一天，现在总结下逻辑。

解答：

采用weui官方的级联picker，注意是级联picker，不是多列，也不是单列。

效果图：



处理逻辑：将后台请求的数据，拼接成weui官方给出的级联pick数据模型

级联pick数据模型:

// 级联picker
weui.picker([
{
    label: '飞机票',
    value: 0,
    children: [
        {
            label: '经济舱',
            value: 1
        },
        {
            label: '商务舱',
            value: 2
        }
    ]
},
{
    label: '火车票',
    value: 1,
    children: [
        {
            label: '卧铺',
            value: 1,
            disabled: true // 不可用
        },
        {
            label: '坐票',
            value: 2
        },
        {
            label: '站票',
            value: 3
        }
    ]
},
{
    label: '汽车票',
    value: 3,
    children: [
        {
            label: '快班',
            value: 1
        },
        {
            label: '普通',
            value: 2
        }
    ]
}
], {
   className: 'custom-classname',
   container: 'body',
   defaultValue: [1, 3],
   onChange: function (result) {
       console.log(result)
   },
   onConfirm: function (result) {
       console.log(result)
   },
   id: 'doubleLinePicker'
});

后台给出接口逻辑：

后台给出了2个接口，第一个是获取34个省列表的接口，一个简单的get请求，第二个接口是根据省份的provinceCode去请求该省的城市列表的接口。

纠结的是：我本来想在weui的picker组件里面有个onchange回调事件里面去请求城市列表的接口，但是有一个问题是当滑动省份列表的时候，虽然触发了onchange 回调，也去请求后端提供的城市接口的列表了，但是遗憾的试图上并没有更新，没更新的原因：滑动结束后的这一刻，才去触发这个事件。

下面贴出一个demo代码：(随便写的demo,没有做接口分层，全部写一个组件里面了，主要是注重逻辑的实现)

<template>
	<div @click="fn">省市区测试</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "weui",
		data(){
			return{
				pickerData:[]
			}
		},
		mounted:function(){
			this.getProvince();
		},
		methods:{
			fn: function () {
				console.log(this.pickerData,'pickdata');
				weui.picker(this.pickerData, {
					defaultValue: ['3', 'A'],
					onChange: function (result) {
						console.log(result);
					},
					onConfirm: function (result) {
						console.log(result);
					},
					id: 'multiPickerBtn'
				});

			},
			getProvince: function () {
				var self = this;
				axios.defaults.headers.common['token'] = '26fd746695584d79aada0e03561edbbc';
				var url = this.HOST+"/h5/pages/agent/province/list";
				this.$axios.get(url).then(respose => {
						var data = respose.data.data.provinces;
						//遍历数组
						data.forEach(function (item) {
							self.getCityList(item.provinceCode,item)
						})

					})
					.catch(error => {
						console.log(error)
					});

			},
			getCityList:function (provinceCode,provinceItem) {
				axios.defaults.headers.common['token'] = '26fd746695584d79aada0e03561edbbc';
				var url = this.HOST+"/h5/pages/agent/city/list";
				this.$axios.get(url,{
					params:{'provinceCode':provinceCode}
				}).then(respose => {
					var data = respose.data.data.cities;
					var children = [];
					data.forEach(function (cityItem) {
						children.push(
							{
								label: cityItem.cityName,
								value: cityItem.cityCode
							}
						);
					});
					this.pickerData.push({
						label: provinceItem.provinceName,
						value: provinceItem.provinceCode,
						children: children
					})
				})
					.catch(error => {
						console.log(error)
					});
			}
		}


	}
</script>


 

【实例简介】
实现页两级联动，一般都是在html或jsp等里面写的，我写的是在java中的。
【实例截图】
【核心代码】
Java代码实现二级联动
└── 用Java代码实现二级联动
├── city.sql
└── webcity
├── src
│   └── com
│       └── web
│           ├── dao
│           │   └── CityDAO.java
│           ├── dwr
│           │   └── City.java
│           └── util
│               └── DBUtil.java
└── WebRoot
├── city.jsp
├── index.jsp
└── WEB-INF
├── classes
│   └── com
│       └── web
│           ├── dao
│           │   └── CityDAO.class
│           ├── dwr
│           │   └── City.class
│           └── util
│               └── DBUtil.class
├── dwr.xml
├── lib
│   ├── classes12.jar
│   ├── commons-logging.jar
│   └── dwr.jar
├── META-INF
│   └── MANIFEST.MF
└── web.xml
18 directories, 15 files

实现地市两级联动
实现省市两级联动
注意以下两个两个js文件的路径配置成自己存放的路径
<script type="text/javascript" language="javascript" src="./script/jquery-1.10.2.js"></script>
<script type="text/javascript" language="javascript" src="./script/linkageProvinceCity.js"></script>

展示两级联动的html页面
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" language="javascript" src="./script/jquery-1.10.2.js"></script>
    <script type="text/javascript" language="javascript" src="./script/linkageProvinceCity.js"></script>
</head>
<body>
所在省市
<select id="selectProv" onchange="prov_onChange()">
    <option>请选择省份</option>
</select>
<select id="selectCity" onchange="city_onChange()">
    <option>请选择市区</option>
</select>
</body>
</html>

下面是新建一个JavaScript 文件

名字叫linkageProvinceCity.js
$(function () {
    //初始化省份菜单
    var prov = new Array();
    prov[1] = "北京市";
    prov[2] = "天津市";
    prov[3] = "上海市";
    prov[4] = "重庆市";
    prov[5] = "河北省";
    prov[6] = "山西省";
    prov[7] = "台湾省";
    prov[8] = "辽宁省";
    prov[9] = "吉林省";
    prov[10] = "黑龙江省";
    prov[11] = "江苏省";
    prov[12] = "浙江省";
    prov[13] = "安徽省";
    prov[14] = "福建省";
    prov[15] = "江西省";
    prov[16] = "山东省";
    prov[17] = "河南省";
    prov[18] = "湖北省";
    prov[19] = "湖南省";
    prov[20] = "广东省";
    prov[21] = "甘肃省";
    prov[22] = "四川省";
    prov[23] = "贵州省";
    prov[24] = "海南省";
    prov[25] = "云南省";
    prov[26] = "青海省";
    prov[27] = "陕西省";
    prov[28] = "广西壮族自治区";
    prov[29] = "西藏自治区";
    prov[30] = "宁夏回族自治区";
    prov[31] = "新疆维吾尔自治区";
    prov[32] = "内蒙古自治区";
    prov[33] = "澳门特别行政区";
    prov[34] = "香港特别行政区";
    for (var i = 1; i < prov.length; i++) {
        $("#selectProv").append("<option>"+prov[i]+"</option>");
    }
    var city = new Array();
    city[1] = new Array("北京市");
    city[2] = new Array("天津市");
    city[3] = new Array("上海市");
    city[4] = new Array("重庆市");
    city[5] = new Array("保定市", "沧州市", "承德市", "邯郸市", "衡水市", "廊坊市", "秦皇岛市", "石家庄市", "唐山市", "邢台市", "张家口市");
    city[6] = new Array("长治市", "大同市", "晋城市", "晋中市", "临汾市", "吕梁市", "朔州市", "太原市", "忻州市", "阳泉市", "运城市");
    city[7] = new Array("高雄市", "高雄县", "花莲县", "基隆市", "嘉义市", "嘉义县", "苗栗县", "南投县", "澎湖县", "屏东县", "台北市", "台北县", "台东县", "台南市", "台南县", "台中市", "台中县", "桃园县", "新竹市", "新竹县", "宜兰县", "云林县", "彰化县");
    city[8] = new Array("鞍山市", "本溪市", "朝阳市", "大连市", "丹东市", "抚顺市", "阜新市", "葫芦岛市", "锦州市", "辽阳市", "盘锦市", "沈阳市", "铁岭市", "营口市");
    city[9] = new Array("白城市", "白山市", "长春市", "吉林市", "辽源市", "四平市", "松原市", "通化市", "延边朝鲜族自治州");
    city[10] = new Array("大庆市", "大兴安岭地区", "哈尔滨市", "鹤岗市", "黑河市", "鸡西市", "佳木斯市", "牡丹江市", "七台河市", "齐齐哈尔市", "双鸭山市", "绥化市", "伊春市");
    city[11] = new Array("常州市", "淮安市", "连云港市", "南京市", "南通市", "苏州市", "宿迁市", "泰州市", "无锡市", "徐州市", "盐城市", "扬州市", "镇江市");
    city[12] = new Array("杭州市", "湖州市", "嘉兴市", "金华市", "丽水市", "宁波市", "衢州市", "绍兴市", "台州市", "温州市", "舟山市");
    city[13] = new Array("安庆市", "蚌埠市", "亳州市", "巢湖市", "池州市", "滁州市", "阜阳市", "合肥市", "淮北市", "淮南市", "黄山市", "六安市", "马鞍山市", "宿州市", "铜陵市", "芜湖市", "宣城市");
    city[14] = new Array("福州市", "龙岩市", "南平市", "宁德市", "莆田市", "泉州市", "三明市", "厦门市", "漳州市");
    city[15] = new Array("抚州市", "赣州市", "吉安市", "景德镇市", "九江市", "南昌市", "萍乡市", "上饶市", "新余市", "宜春市", "鹰潭市");
    city[16] = new Array("滨州市", "德州市", "东营市", "菏泽市", "济南市", "济宁市", "莱芜市", "聊城市", "临沂市", "青岛市", "日照市", "泰安市", "威海市", "潍坊市", "烟台市", "枣庄市", "淄博市");
    city[17] = new Array("安阳市", "鹤壁市", "济源市", "焦作市", "开封市", "洛阳市", "漯河市", "南阳市", "平顶山市", "濮阳市", "三门峡市", "商丘市", "新乡市", "信阳市", "许昌市", "郑州市", "周口市", "驻马店市");
    city[18] = new Array("鄂州市", "恩施土家族苗族自治州", "黄冈市", "黄石市", "荆门市", "荆州市", "潜江市", "神农架林区", "十堰市", "随州市", "天门市", "武汉市", "仙桃市", "咸宁市", "襄樊市", "孝感市", "宜昌市");
    city[19] = new Array("长沙市", "常德市", "郴州市", "衡阳市", "怀化市", "娄底市", "邵阳市", "湘潭市", "湘西土家族苗族自治州", "益阳市", "永州市", "岳阳市", "张家界市", "株洲市");
    city[20] = new Array("潮州市", "东莞市", "佛山市", "广州市", "河源市", "惠州市", "江门市", "揭阳市", "茂名市", "梅州市", "清远市", "汕头市", "汕尾市", "韶关市", "深圳市", "阳江市", "云浮市", "湛江市", "肇庆市", "中山市", "珠海市");
    city[21] = new Array("白银市", "定西市", "甘南藏族自治州", "嘉峪关市", "金昌市", "酒泉市", "兰州市", "临夏回族自治州", "陇南市", "平凉市", "庆阳市", "天水市", "武威市", "张掖市");
    city[22] = new Array("阿坝藏族羌族自治州", "巴中市", "成都市", "达州市", "德阳市", "甘孜藏族自治州", "广安市", "广元市", "乐山市", "凉山彝族自治州", "泸州市", "眉山市", "绵阳市", "内江市", "南充市", "攀枝花市", "遂宁市", "雅安市", "宜宾市", "资阳市", "自贡市");
    city[23] = new Array("安顺市", "毕节地区", "贵阳市", "六盘水市", "黔东南苗族侗族自治州", "黔南布依族苗族自治州", "黔西南布依族苗族自治州", "铜仁地区", "遵义市");
    city[24] = new Array("白沙黎族自治县", "保亭黎族苗族自治县", "昌江黎族自治县", "澄迈县", "儋州市", "定安县", "东方市", "海口市", "乐东黎族自治县", "临高县", "陵水黎族自治县", "琼海市", "琼中黎族苗族自治县", "三亚市", "屯昌县", "万宁市", "文昌市", "五指山市");
    city[25] = new Array("保山市", "楚雄彝族自治州", "大理白族自治州", "德宏傣族景颇族自治州", "迪庆藏族自治州", "红河哈尼族彝族自治州", "昆明市", "丽江市", "临沧市", "怒江傈傈族自治州", "曲靖市", "思茅市", "文山壮族苗族自治州", "西双版纳傣族自治州", "玉溪市", "昭通市");
    city[26] = new Array("果洛藏族自治州", "海北藏族自治州", "海东地区", "海南藏族自治州", "海西蒙古族藏族自治州", "黄南藏族自治州", "西宁市", "玉树藏族自治州");
    city[27] = new Array("安康市", "宝鸡市", "汉中市", "商洛市", "铜川市", "渭南市", "西安市", "咸阳市", "延安市", "榆林市");
    city[28] = new Array("百色市", "北海市", "崇左市", "防城港市", "贵港市", "桂林市", "河池市", "贺州市", "来宾市", "柳州市", "南宁市", "钦州市", "梧州市", "玉林市");
    city[29] = new Array("阿里地区", "昌都地区", "拉萨市", "林芝地区", "那曲地区", "日喀则地区", "山南地区");
    city[30] = new Array("固原市", "石嘴山市", "吴忠市", "银川市", "中卫市");
    city[31] = new Array("阿克苏市", "阿拉尔市", "阿勒泰市", "阿图什市", "博乐市", "昌吉市", "阜康市", "哈密市", "和田市", "喀什市", "克拉玛依市", "库尔勒市", "奎屯市", "米泉市", "石河子市", "塔城市", "图木舒克市", "吐鲁番市", "乌鲁木齐市", "乌苏市", "五家渠市", "伊宁市");
    city[32] = new Array("阿拉善盟", "巴彦淖尔市", "包头市", "赤峰市", "鄂尔多斯市", "呼和浩特市", "呼伦贝尔市", "通辽市", "乌海市", "乌兰察布市", "锡林郭勒盟", "兴安盟");
    city[33] = new Array("澳门特别行政区");
    city[34] = new Array("香港特别行政区");
    $("#selectProv").on("change",function(){
        $("#selectCity").children("option").detach();
        $("#selectCity").append("<option>请选择市区</option>");
        var indexProv = $("#selectProv>option:selected").index();//取得选中的想的数组下标0
        if (indexProv > 0) {
            for (var i = 0; i < city[indexProv].length; i++) {
                $("#selectCity").append("<option>" + city[indexProv][i] + "</option>");
            }
            console.log( $("#selectProv>option:selected").val() + $("#selectCity>option:first").val() );
        }else {
            console.log( "请选择省份" );
        }
    });
    $("#selectCity").on("change",function(){
        console.log( $("#selectProv>option:selected").val() + $("#selectCity>option:selected").val() );
    });
});