省级三级联动(改)

1.数据库实体,在原来基础上加一个是否是直辖市的标志位

public class AreaEntity {
   @Key
   private int id;  //主键
   private String areaId;  //地区码
   private String areaName;  //地区名称
   private String pid; //父地区码
   private int type;  //地区类型   0为省级 1为市级  2为县级
   private int municipality;  //是否是直辖市  0为直辖市 1为非直辖市

}

2.jsp

 <tr> 
        <td style="width: 110px;" align="right">所属省份: </td>
         <td>
              <select class="select"  name="province"  id="province" οnchange="getCity()"   style="width: 228px;height: 28px;border: 1px solid #d3d3d3;">

                    </select>
                    <font color="red">*</font>
        </td>
    </tr>
    <tr>
        <td style="width: 110px;" align="right"> 所属市级: </td>
        <td>                 
              <select class="select"  name="city" id="city"  οnchange="getArea()" style="width: 228px;height: 28px;border: 1px solid #d3d3d3;">
  
              </select>
              <font color="red">*</font>
        </td>
       </tr>
       <tr>
            <td style="width: 110px;" align="right"> 所属县区:  </td>
            <td>                    
              <select class="select"  name="counties"  id="counties" style="width: 228px;height: 28px;border: 1px solid #d3d3d3;">
         
              </select>
              <font color="red">*</font>      
                            
         </td>
    </tr>


3.js 部分修改较多

  新增时的脚本:

  a.初始化

  /*加载省下拉选*/ 
    $.ajax({ 
              type: "post", 
              url: adminPath+"/area/getProvince", 
              dataType: "json",
              success: function (data) {
             console.log(data);
             var proHtml = '<option value="0">请选择</option>';
             $.each(data, function (index, value) {
              proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
             });
          $("#province").html(proHtml);
              }
   }); 

  b. 选择省时

  /*加载市下拉选*/ 
     function getCity() { 
         var id = $("#province").val(); 
         var provinceName = $("#province").find("option:selected").text();
         $("#city").empty(); 
         $("#counties").empty(); 
      $.getJSON(adminPath+"/area/getProvinceById",{id:id}, function(prodata){
       
          $.ajax({ 
               type: "post", 
               url: adminPath+"/area/getCity", 
               data: {"id": id}, 
               success: function (data) { 
                console.log(data);
             var proHtml = "<option value='0' selected='selected' >" + '请选择' + "</option>";
              $.each(data, function (index, value) {
               proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
              });
              
             if(prodata.municipality=='1'){
           $("#city").html(proHtml);            
                    $("#counties").append("<option value='0' selected='selected' >" + '请选择' + "</option>"); 
             }else{
              $("#city").append("<option value="+id+">"+provinceName+"</option>");
              $("#counties").html(proHtml);
             }    
               
               }, 
               error: function () { 
                   alert("加载市失败"); 
               } 
          });
      });  
     } 

   c.选择区时

   /*加载地区下拉选*/ 
        function getArea() { 
            var id = $("#city").val(); 
            $("#counties").empty(); 
            $.ajax({ 
                 type: "post", 
                 url: adminPath+"/area/getArea", 
                 data: {"id": id}, 
                 success: function (data) { 
                     console.log(data);
            var proHtml = "<option value='0' selected='selected' >" + '请选择' + "</option>";
             $.each(data, function (index, value) {
              proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
             });
         $("#counties").html(proHtml);   
                 }, 
                 error: function () { 
                     alert("加载区失败"); 
                 } 
            }); 
        }    


    修改时的脚本

   $.getJSON(adminPath+"/Manage/querySysById",{payerId:id}, function(data){
    $.ajax({ 
              type: "post", 
              url: adminPath+"/area/getProvince", 
              dataType: "json",
              success: function (dataPro) {
             console.log(dataPro);
             var proHtml = '<option value="0">请选择</option>';
             $.each(dataPro, function (index, value) {              
              if(value.areaId == data.province){
                 proHtml += "<option selected=\"selected\" value="+value.areaId+">"+value.areaName+"</option>";
              }else{
                 proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
              }
                });
          $("#province").html(proHtml);
              }
       });
    
    //分情况,直辖市与非直辖市
    $.getJSON(adminPath+"/area/getProvinceById",{id:data.province}, function(prodata){ 
     $.ajax({ 
               type: "post", 
               url: adminPath+"/area/getCity", 
               data: {"id": data.province}, 
               success: function (dataCity) { 
                    console.log(dataCity);
                 var proHtml = "<option value='0' >" + '请选择' + "</option>";
               $.each(dataCity, function (index, value) {
                if(value.areaId == data.city){
                    proHtml += "<option selected=\"selected\" value="+value.areaId+">"+value.areaName+"</option>";
                }else{
                    proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
                }
               });
               
              if(prodata.municipality=='1'){
            $("#city").html(proHtml);     
            $.ajax({ 
                       type: "post", 
                       url: adminPath+"/area/getArea", 
                       data: {"id": data.city}, 
                       success: function (dataArea) { 
                           console.log(dataArea);
                  var proHtml = "<option value='0'>" + '请选择' + "</option>";
                   $.each(dataArea, function (index, value) {
                    if(value.areaId == data.counties){
                    proHtml += "<option selected=\"selected\" value="+value.areaId+">"+value.areaName+"</option>";
                    }else{
                       proHtml += "<option value="+value.areaId+">"+value.areaName+"</option>";
                    } 
                   });
               $("#counties").html(proHtml);   
                       }
                  }); 
              }else{
               $("#city").append("<option value="+id+">"+prodata.areaName+"</option>");
               $("#counties").html(proHtml);
              }    
                
                }, 
                error: function () { 
                    alert("加载市失败"); 
                } 
           });
         });

4.后台修改

action 新增:

/**
  * 获取省信息
  */
 @RequestMapping(value="/getProvinceById")
 @ResponseBody 
    public AreaEntity getProvinceById(@RequestParam(value="id") String id){ 
       AreaEntity areas=sysAreaBiz.getProvinceById(id); 
       return areas; 
 } 


daoimpl 新增:


 @Override
 public AreaEntity getProvinceById(String id) {
  String sql = "select a.* from tax_area a where a.ID= " + id;
  return jdbcTemplateOrcl.queryForObject(sql, new SysAreaRowMapper());
 }


至此,可以了。


此文主要记录,处理省份为直辖市时,市部分select也为直辖市名称。






  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值