省市三级联动（数据库）

1.jsp

</select>
        </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>
        </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>
         </td>
    </tr>

2.js

$("#addTax").click(function(){
   /*加载省下拉选*/
    $.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);
              }
   });

  });

/*加载市下拉选*/
     function getCity() {
         var id = $("#province").val();
         $("#city").empty();
         $("#counties").empty();
         $.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>";
            });
        $("#city").html(proHtml);
                  $("#counties").append("<option value='0' selected='selected' >" + '请选择' + "</option>");

              },
              error: function () {
                  alert("加载市失败");
              }
         });
     }

     /*加载地区下拉选*/
        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("加载区失败");
                 }
            });
        }

function updateTax(id){

$("#province").empty();
$("#city").empty();
$("#counties").empty();

$.getJSON(adminPath+"/taxManage/querySysTaxById",{taxpayerId: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);
              }
       });
    $.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>";
             }
            });
        $("#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);
                  }
             });

   });

}

3.表

-- Create table
create table AREA
(
ID       NUMBER not null,
AREAID   VARCHAR2(50),
AREANAME VARCHAR2(60),
PID      VARCHAR2(6),
TYPE     NUMBER
)
tablespace USERS
pctfree 10
initrans 1
maxtrans 255
storage
(
    initial 64
    next 1
    minextents 1
    maxextents unlimited
);

4.思路

在页面初始化的时候把所有省分给加载到<select id="Province"></select>中；
当用户选择某一省份的时候，再把该省份下面的所有市加载到<select id="City"></select>中；
然后再选择某一个市再加载该市下面的所有区县到<select id="County"></select>中；
当用户选择的 Province 发生改变时后面的 City 和 County 清空重新加载；

6.后台（springmvc+spring）

action

/**
* 省市联动
*
*/
@Controller
@RequestMapping(value = "/${adminPath}/area")
public class SysAreaAction extends BaseAction{
@Autowired
private SysAreaBiz sysAreaBiz;

/**
* 获取省列表
*/
@RequestMapping(value="/getProvince")
@ResponseBody
    public List<AreaEntity> getProvince(){
       List<AreaEntity> areas=sysAreaBiz.queryAreas("",0);
         return areas;
}

/**
* 获取市列表
*/
@RequestMapping(value="/getCity")
@ResponseBody
    public List<AreaEntity> getCity(@RequestParam(value="id") String id){
       List<AreaEntity> areas=sysAreaBiz.queryAreas(id,1);
         return areas;
}

/**
* 获取县/区列表
*/
@RequestMapping(value="/getArea")
@ResponseBody
    public List<AreaEntity> getArea(@RequestParam(value="id") String id){
       List<AreaEntity> areas=sysAreaBiz.queryAreas(id,2);
         return areas;
}

daoimpl

public List<AreaEntity> queryAreas(String pid, int type) {
  String sql = "select a.* from tax_area a";
  sql+= " where a.type="+ type;
  if(StringUtils.isNotEmpty(pid)){
   sql+= " and a.pid = '"+pid+"' ";
  }

  return this.jdbcTemplateOrcl.query(sql, new SysAreaRowMapper());
}

碰到问题：

shiroFilter 中加入只检查登录验证，不检查权限验证的地址：

中加入
<value>/${adminPath}/area</value>

</set>
            </property>
                    </bean>
                </entry>
            </map>
        </property>

省市三级联动（数据库）相关推荐

dropdownlist ajax联动,asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例...
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级 ...
mysql 省市区三级联动_javaweb--json--ajax--mysql实现省市区三级联动（附三级联动数据库）...
在web中,实现三级联动很常见,尤其是利用jquery+json.但是从根本上来说jquery并不是最能让人容易理解的,接下来从最基本的javascript开始,实现由javascript+json+ ...
java三级联动从数据库查,三级联动+数据库
jsp页面三级联动+数据库 sanjilist = sanjiDao.getSanjilistBySql(sql1); session.setAttribute("provinces&qu ...
WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)
近期在实现收货地址功能.用到了省市区三级联动效果.网上找到一般都是xml或json,数据源陈旧改动麻烦,改动了一下使用数据库方式实现了一下数据源解决,因为数据量比較大通过初始化批量运行SQL的方式不 ...
省市二级联动数据库生成代码（JAVA）
最近在给一客户做网站,用的是php,现在需要有一个下拉框选择省市,并且需要保存省市的简拼,如"河北 HB".我在网上找了半天,发现基本没有符合要求的代码,于是自己顶着浪费巨大时间的 ...
完整，详细的基于jquery省市三级联动和基于angular的省市三级联动对比
前几天遇到需要输入地址的一个项目,里面就会有全国各个省市县的选择. 对于全国省市县的选择,难点在于全国省市县的数据资源.而具体的操作并不是很难. 本来我想免费发送资源的,可是csdn,这最少也需要1积 ...
省市县三级联动数据库
/* *@名称: myaddress.js *@功能: 地址页面的下拉列表动态地址脚本 *@作者: liuhaihui *@版本: v1.0 *@时间: 2014年5月29日17:36:27s *参考 ...
ajax js java省市三级联动菜单,AJAX省市区三级联动下拉菜单(java版)
此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有javascript中的代码为: $(document). ...
三级联动数据库添加html,前端jQuery最新省市区三级联动插件，包含sql数据库
一.目录结构二.功能演示 1)用浏览器打开,index.html 2)单击,输入框, 3)选择省份 4).选择城市 5).选择区县 6).显示已选中的名称和ID 三.前端页面html> 地区数 ...
ajax实现省市三级联动
转自:http://blog.sina.com.cn/s/blog_4758a67c0100bk8t.html~type=v5_one&label=rela_prevarticle <h ...

省市三级联动（数据库）

省市三级联动（数据库）相关推荐

最新文章

热门文章