193 lines
6.1 KiB
HTML
193 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>地址智能识别</title>
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<script src="js/jquery.min.js"></script>
|
|
<script src="js/address_parse.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<style>
|
|
#value .key {
|
|
color: #ff5722;
|
|
display: inline-block;
|
|
width: 111px;
|
|
text-align: right;
|
|
}
|
|
|
|
#value .value {
|
|
color: #366500;
|
|
padding-left: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="page-header">
|
|
<h1>地址智能识别 <small>支持省市区街道/姓名/电话/邮编</small></h1>
|
|
</div>
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<label for="exampleInputName2">省/直辖市</label>
|
|
<select class="form-control" id="province">
|
|
<option>请选择</option>
|
|
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exampleInputEmail2">市</label>
|
|
<select class="form-control" id="city">
|
|
<option>请选择</option>
|
|
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exampleInputEmail2">区/县</label>
|
|
<select class="form-control" id="county">
|
|
<option>请选择</option>
|
|
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exampleInputEmail2">街道</label>
|
|
<select class="form-control" id="street">
|
|
<option>请选择</option>
|
|
|
|
</select>
|
|
</div>
|
|
</form>
|
|
<div class="alert alert-danger" role="alert">地址、姓名、电话用空格分开!!（支持以下数据格式）</div>
|
|
<ol>
|
|
<li>广东省珠海市香洲区盘山路28号幸福茶庄 陈景勇 13593464918</li>
|
|
<li>陕西省西安市雁塔区丈八沟街道高新四路高新大都荟 马云 13593464918</li>
|
|
<li>陕西省西安市雁塔区丈八沟街道高新四路高新大都荟710061马云 13593464918</li>
|
|
<li>北京市朝阳区姚家园3楼 13593464918 马云</li>
|
|
<li>北京市朝阳区姚家园3楼 150-3569-6956 马云</li>
|
|
<li>河北省石家庄市新华区中华北大街68号鹿城商务中心6号楼1413室 150-3569-6956 马云</li>
|
|
</ol>
|
|
|
|
<textarea class="form-control" onchange="getAddress()" cols="50" rows="7" id='textarea'
|
|
placeholder="请粘贴你的地址"></textarea>
|
|
<div id="value"></div>
|
|
</body>
|
|
|
|
</html>
|
|
<script>
|
|
function getAddress() {
|
|
let parse_list = smart($('#textarea').val())
|
|
let html = '';
|
|
for (let key in parse_list) {
|
|
if (parse_list[key]) {
|
|
html += `<p><span class="key">` + key + `</span>:<span class="value">` + parse_list[key] + `</span></p>`
|
|
}
|
|
}
|
|
$('#value').html(html);
|
|
|
|
$("#province").val(parse_list.provinceCode);
|
|
$("#city").val(parse_list.cityCode);
|
|
$("#county").val(parse_list.countyCode);
|
|
$("#street").val(parse_list.streetCode);
|
|
|
|
getCity($("#province").val(), parse_list)
|
|
getCounty($("#city").val(), parse_list)
|
|
getStreet($("#county").val(), parse_list)
|
|
|
|
}
|
|
getJson.then((res) => {
|
|
addressList = res.address;
|
|
addressList.forEach(item => {
|
|
formatAddresList(item, 1, '')
|
|
})
|
|
let province = '';
|
|
addressList.forEach(res => {
|
|
province += ` <option value='` + res.code + `'>` + res.name + `</option>`;
|
|
})
|
|
$("#province").html(province)
|
|
getCity($("#province").val())
|
|
getCounty($("#city").val())
|
|
getStreet($("#county").val())
|
|
})
|
|
|
|
$("#province").change(res => {
|
|
let provinceCode = $("#province").val();
|
|
getCity(provinceCode);
|
|
getCounty($("#city").val())
|
|
getStreet($("#county").val())
|
|
})
|
|
|
|
$("#city").change(res => {
|
|
let cityCode = $("#city").val();
|
|
getCounty(cityCode);
|
|
getStreet($("#county").val())
|
|
})
|
|
|
|
$("#county").change(res => {
|
|
let countyCode = $("#county").val();
|
|
getStreet(countyCode);
|
|
})
|
|
|
|
function getCity(provinceCode, parse_list) {
|
|
let cityList = [];
|
|
let city = '';
|
|
addressList.forEach(res => {
|
|
if (res.code == provinceCode) {
|
|
cityList = res.children;
|
|
return;
|
|
}
|
|
})
|
|
cityList.forEach(res => {
|
|
city += ` <option value='` + res.code + `'>` + res.name + `</option>`;
|
|
})
|
|
$("#city").html(city);
|
|
if (parse_list) {
|
|
$("#city").val(parse_list.cityCode);
|
|
}
|
|
}
|
|
|
|
function getCounty(cityCode, parse_list) {
|
|
let countyList = [];
|
|
let county = '';
|
|
addressList.forEach(el => {
|
|
el.children.forEach(res => {
|
|
if (res.code == cityCode) {
|
|
countyList = res.children;
|
|
return;
|
|
}
|
|
})
|
|
})
|
|
|
|
countyList.forEach(res => {
|
|
county += ` <option value='` + res.code + `'>` + res.name + `</option>`;
|
|
})
|
|
$("#county").html(county)
|
|
if (parse_list) {
|
|
$("#county").val(parse_list.countyCode);
|
|
}
|
|
}
|
|
|
|
function getStreet(countyCode, parse_list) {
|
|
let streetList = [];
|
|
let street = '';
|
|
addressList.forEach(el => {
|
|
el.children.forEach(element => {
|
|
element.children.forEach(res => {
|
|
if (res.code == countyCode) {
|
|
streetList = res.children;
|
|
return;
|
|
}
|
|
})
|
|
|
|
})
|
|
})
|
|
streetList.forEach(res => {
|
|
street += ` <option value='` + res.code + `'>` + res.name + `</option>`;
|
|
})
|
|
$("#street").html(street)
|
|
if (parse_list) {
|
|
$("#street").val(parse_list.streetCode);
|
|
}
|
|
}
|
|
</script> |