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"
}]
}]
}];
