ssm框架下总行、省、市、分行级联

阳光穿透心脏的1/2处 2022-05-28 04:24 176阅读 0赞

1.html代码：
             <form>
                  <div class="form-group">
                     <label for="recipient-name" class="control-label">收款人开户银行:</label>
                     <select style="width:170px;" id="bank" οnchange="getDropBranchVal();"></select>
                  </div>
                  
                  <div class="form-group">
                     <label for="recipient-name" class="control-label">收款人银行归属地(省):</label>
                     <select style="width:185px;" id="bankProvince" οnchange="getCityDropVal();"></select>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">收款人银行归属地(市区):</label>
                    <select style="width:170px;" id="bankCity" οnchange="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