1.html代码:
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">收款人开户银行:</label>
<select style="width:170px;" id="bank" onchange="getDropBranchVal();"></select>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">收款人银行归属地(省):</label>
<select style="width:185px;" id="bankProvince" onchange="getCityDropVal();"></select>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">收款人银行归属地(市区):</label>
<select style="width:170px;" id="bankCity" onchange="getDropBranchVal();"></select>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">收款人开户银行名称:</label>
<select style="width:170px;" id="bankBranch"></select>
</div>
</form>
2、js代码:
<#--获取省下拉框-->
function getProvinceDropVal(){
$.ajax({
type : 'post',
url : '${basePath}/system/getProvinceDropVal.shtml', // 请求路径
cache : false,
async :false,
data : {
},
success : function(result) {
<#--初始化下拉框的值-->
$("#bankProvince").append("<option value='0'>-</option>");
var tmpArr = JSON.parse(result.provinceList);
for (var i = 0; i < tmpArr.length; i++) {
$("#bankProvince").append(
"<option value='" + tmpArr[i].id + "'>" + tmpArr[i].name + "</option>");
}
$("#bankProvince option:first").prop("selected", 'selected');
},
error : function(data) {
alert("异常!");
}
});
}
<#--获取市下拉框-->
function getCityDropVal(){
$("#bankCity").empty();
var bankProvince =$('#bankProvince').val();
$.ajax({
type : 'post',
url : '${basePath}/system/getCityDropVal.shtml', // 请求路径
cache : false,
async :false,
data : {
'provinceId':bankProvince
},
success : function(result) {
<#--初始化下拉框的值-->
$("#bankCity").append("<option value='0'>-</option>");
var tmpArr = JSON.parse(result.cityList);
for (var i = 0; i < tmpArr.length; i++) {
$("#bankCity").append(
"<option value='" + tmpArr[i].id + "'>" + tmpArr[i].name + "</option>");
}
$("#bankCity option:first").prop("selected", 'selected');
},
error : function(data) {
alert("异常!");
}
});
}
<#--获取银行所在地框-->
function getDropBranchVal(){
$('#bankBranch').empty();
var bankProvince =$('#bankProvince').val();
var bankCity =$('#bankCity').val();
var bank=$('#bank').val();
$.ajax({
type : 'post',
url : '${basePath}/bank/getDropBranchVal.shtml', // 请求路径
cache : false,
async :false,
data : {
'provinceId':bankProvince,
'cityId':bankCity,
'bankId':bank
},
success : function(result) {
<#--初始化下拉框的值-->
$("#bankBranch").append("<option value='0'>-</option>");
var tmpArr = JSON.parse(result.dropCbBankBranchList);
for (var i = 0; i < tmpArr.length; i++) {
$("#bankBranch").append(
"<option value='" + tmpArr[i].id + "'>" + tmpArr[i].name + "</option>");
}
$("#bankBranch option:first").prop("selected", 'selected');
},
error : function(data) {
alert("请选择地区或银行名!");
}
});
}
3、数据库
(1)总行表:id bankCardName bankCode subId
1 中国工商银行 ICBC 111
(2)支行表:id name provinceid cityid bankid
80739 中国工商银行股份有限公司北京通州支行新华分理处 1 1 1
(3)省表: id name
1 北京
(4)市表: id name provinceid areacode
1 北京市 1 010
(5)区表: id cityid name PostCode
1 1 东城区 100010
逻辑关联:区表关联市表id,市表关联省表id,支行关联省、市、总行id
4、后台
(1)数据源1(省): 无传参查询省表,返回全国所有省的List
(2)数据源2(市):传入省id查询市表,返回传入省的所有市的List
(3)数据源3(总行):无传参查询总行表,返回全国总行List
(4)数据源4(支行):传入省id、市id查询支行表,返回某个总行在某个省下的某个市的所有支行List
ssm框架下总行、省、市、分行级联
于 2018-03-29 14:41:03 首次发布