amazeUI 地区选择器三级联动问题解决，带地区数据
2018年5月25号 直接上代码 <div id="area_box"> <select data-am-selected="{maxHeight:200,btnWidth:'120px'}" placeholder="请选择省" id="province"> <option value=""></option> </select> <select data-am-selected="{maxHeight:200,btnWidth:'120px'}" placeholder="请选择市" id="city"> <option value=""></option> </select> <select data-am-selected="{maxHeight:200,btnWidth:'120px'}" placeholder="请选择区/县" id="area"> <option value=""></option> </select> </div> <button class="weui-vcode-btn" id="send">下一步</button> +$(function() { var $province_value, $city_value, $area_value, $areas_code; $areas_code = 0; $('#area_box div:nth-child(4)').attr('class', 'am-selected am-dropdown hide'); $('#area_box div:nth-child(6)').attr('class', 'am-selected am-dropdown hide'); var $province = $('#province'); var $province_length = areas.length; for(var i = 0; i < $province_length; i++) { var $option = $('<option value="' + i + '">' + areas[i].name + '</option>'); $option.appendTo($province); } $('body').on('click', '#area_box>div:nth-child(2) li', function() { $province_value = $(this).attr('data-value'); var $province_selected = $(this).children().html(); var $city_length = areas[$province_value].sub.length; $('#area_box>div:nth-child(2) .am-selected-status').html($province_selected); $('#city').html('<option value=""></option>'); $('#area').html('<option value=""></option>'); for(var j = 0; j < $city_length; j++) { var $option = $('<option value="' + j + '">' + areas[$province_value].sub[j].name + '</option>'); $option.appendTo($('#city')); } $('#area_box>div:nth-child(4)').attr('class', 'am-selected am-dropdown'); $('#area_box>div:nth-child(6)').attr('class', 'am-selected am-dropdown hide'); $areas_code = 1; }); $('body').on('click', '#area_box>div:nth-child(4) li', function() { $city_value = $(this).attr('data-value'); var $city_selected = $(this).children().html(); var $area_length = areas[$province_value].sub[$city_value].sub.length; $('#area_box>div:nth-child(4) .am-selected-status').html($city_selected); $('#area').html('<option value=""></option>'); for(var k = 0; k < $area_length; k++) { var $option = $('<option value="' + k + '">' + areas[$province_value].sub[$city_value].sub[k].name + '</option>'); $option.appendTo($('#area')); } $('#area_box>div:nth-child(6)').attr('class', 'am-selected am-dropdown'); $areas_code = 2; }); $('body').on('click', '#area_box>div:nth-child(6) li', function() { $area_value = $(this).attr('data-value'); var $area_selected = $(this).children().html(); $('#area_box>div:nth-child(6) .am-selected-status').html($area_selected); $areas_code = [$province_value, $city_value, $area_value]; }); $('#send').click(function() { if($areas_code == 0) { console.log('请选择省'); } else if($areas_code == 1) { console.log('请选择市'); } else if($areas_code == 2) { console.log('请选择区/县'); } }); }); 地区数据满足以下格式查看所有数据 var areas = [{ "name": "北京", "code": "110000", "sub": [{ "name": "北京市", "code": "110000", "sub": [{ "name": "东城区", "code": "110101" }, { "name": "西城区", "code": "110102" }, { "name": "朝阳区", "code": "110105" }, { "name": "丰台区", "code": "110106" }, { "name": "石景山区", "code": "110107" }, { "name": "海淀区", "code": "110108" }, { "name": "门头沟区", "code": "110109" }, { "name": "房山区", "code": "110111" }, { "name": "通州区", "code": "110112" }, { "name": "顺义区", "code": "110113" }, { "name": "昌平区", "code": "110114" }, { "name": "大兴区", "code": "110115" }, { "name": "怀柔区", "code": "110116" }, { "name": "平谷区", "code": "110117" }, { "name": "密云县", "code": "110228" }, { "name": "延庆县", "code": "110229" }] }] }, { "name": "天津", "code": "120000", "sub": [{ "name": "天津市", "code": "120000", "sub": [{ "name": "和平区", "code": "120101" }, { "name": "河东区", "code": "120102" }, { "name": "河西区", "code": "120103" }, { "name": "南开区", "code": "120104" }, { "name": "河北区", "code": "120105" }, { "name": "红桥区", "code": "120106" }, { "name": "东丽区", "code": "120110" }, { "name": "西青区", "code": "120111" }, { "name": "津南区", "code": "120112" }, { "name": "北辰区", "code": "120113" }, { "name": "武清区", "code": "120114" }, { "name": "宝坻区", "code": "120115" }, { "name": "滨海新区", "code": "120116" }, { "name": "宁河县", "code": "120221" }, { "name": "静海县", "code": "120223" }, { "name": "蓟县", "code": "120225" }] }] }];
