数据
github翻到底找到一个大佬的Sqlite数据 下载sqlite数据库运行将数据导出成sql文件
然后写个工具类修改sql文件中的表字段,本地postgresql数据库进行建表运行sql文件插值。
页面下拉框
<div class="form-group">
<label>地址</label>
<div>
<select class="select" id="addr_province" name="province_code" onchange="getCity()">
<option value="-1">请选择</option>
</select>
<select class="select" id="addr_city" name="city_code" onchange="getDistrict()">
<option value="-1">请选择</option>
</select>
<select class="select" id="addr_district" name="district_code" onchange="getTown()" >
<option value="-1">请选择</option>
</select>
<select class="select" id="addr_town" name="town_code" onchange="getVillage()">
<option value="-1">请选择</option>
</select>
<select class="select" id="addr_village" name="town_code">
<option value="-1">请选择</option>
</select>
</div>
</div>
js逻辑
在页面加载时调用了加载省的方法!
/*
* 五级联查下拉框的地址信息查询
* */
function getProvince(){
$.ajax({
type: "post",
url: "addr_queryAddr",
data:{id:'0'},
success: function (data) {
for (var i = 0; i < data.length; i++) {
$('#addr_province').append("<option value='" + data[i].id + "' >" + data[i].name + "</option>")
}
},
error: function () {
alert("加载省失败");
}
});
}
function getCity(){
$('#addr_city').empty();
$('#addr_district').empty();
$('#addr_town').empty();
$('#addr_village').empty();
$.ajax({
type: "post",
url: "addr_queryAddr",
data: {id:$('#addr_province option:selected').val()},
success: function (data) {
$('#addr_city').append("<option value='' selected='selected' >" + '请选择' + "</option>");
$('#addr_district').append("<option value='' selected='selected' >" + '请选择' + "</option>");
$('#addr_town').append("<option value='' selected='selected' >" + '请选择' + "</option>");
$('#addr_village').append("<option value='' selected='selected' >" + '请选择' + "</option>");
for (var i = 0; i < data.length; i++) {
$('#addr_city').append("<option value='" + data[i].id + "' >" + data[i].name + "</option>");
}
},
error: function () {
alert("加载市失败");
}
});
}
function getDistrict(){
$('#addr_district').empty();
$('#addr_town').empty();
$('#addr_village').empty();
$.ajax({
type: "post",
url: "addr_queryAddr",
data: {id:$('#addr_city option:selected').val()},
success: function (data) {
$('#addr_district').append("<option value='' selected='selected' >" + '请选择' + "</option>");
$('#addr_town').append("<option value='' selected='selected' >" + '请选择' + "</option>");
$('#addr_village').append("<option value='' selected='selected' >" + '请选择' + "</option>");
for (var i = 0; i < data.length; i++) {
$('#addr_district').append("<option value='" + data[i].id + "' >" + data[i].name + "</option>");
}
},
error: function () {
alert("加载县或区失败");
}
});
}
function getTown(){
$('#addr_town').empty();
$('#addr_village').empty();
$.ajax({
type: "post",
url: "addr_queryAddr",
data:{id: $('#addr_district option:selected').val()},
success: function (data) {
if (data.length == 0){
$('#addr_town').append("<option value='' selected='selected' >" + '无' + "</option>");
$('#addr_village').append("<option value='' selected='selected' >" + '无' + "</option>");
}else{
$('#addr_town').append("<option value='' selected='selected' >" + '请选择' + "</option>");
$('#addr_village').append("<option value='' selected='selected' >" + '请选择' + "</option>");
for (var i = 0; i < data.length; i++) {
$('#addr_town').append("<option value='" + data[i].id + "' >" + data[i].name + "</option>");
}
}
},
error: function () {
alert("加载镇或街道失败");
}
});
}
function getVillage(){
$('#addr_village').empty();
$.ajax({
type: "post",
url: "addr_queryAddr",
data: {id:$('#addr_town option:selected').val()},
success: function (data) {
if(data.length==0){
$('#addr_village').append("<option value='' selected='selected' >" + '无' + "</option>");
}else {
$('#addr_village').append("<option value='' selected='selected' >" + '请选择' + "</option>");
for (var i = 0; i < data.length; i++) {
$('#addr_village').append("<option value='" + data[i].id + "' >" + data[i].name + "</option>");
}
}
},
error: function () {
alert("加载村失败");
}
});
}
后台代码
采用是ssm框架 基本的三层查询都没有别的业务逻辑!都只有一个方法!
总洁
边学习 边借鉴网上代码
这次用到了 jquery jsp SSm PostgreSql Sqlite 自定义工具类转换插值的sql!