省份,城市,地区的三级联动

最新推荐文章于 2022-07-14 11:21:13 发布

LMY____梦阳� � �

最新推荐文章于 2022-07-14 11:21:13 发布

阅读量876

点赞数

分类专栏：省份城市地区的三级联动文章标签：省份城市地区的三级联动

本文链接：https://blog.csdn.net/L__MY/article/details/90723253

版权

城市同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

地区的三级联动

1 篇文章 0 订阅

订阅专栏

省份

0 篇文章 0 订阅

订阅专栏

这里只介绍页面的代码和控制层代码

<script type="text/javascript">
$(function(){
 $.post(
  "toadd2",
  {},
  function(obj){
   var minzus = obj.minzus;
   var citys = obj.citys;
   
   for(var i in minzus){
    $("[name='mid']").append("<option value='"+minzus[i].mid+"'>"+minzus[i].mname+"</option>");
   }
   for(var i in citys){
    $("[name='sheng_id']").append("<option value='"+citys[i].id+"'>"+citys[i].name+"</option>");
   }
  },
  "json"
 );
})

function sheng(id){
 $.post(
  "citys", 
  {id:id},
  function(obj){
   $("[name='shi_id']").empty();//每次追加清空
   //追加一条请选择
   $("[name='shi_id']").append("<option value=''>请选择</option>");
   $("[name='qu_id']").empty();//每次追加清空
   //追加一条请选择
   $("[name='qu_id']").append("<option value=''>请选择</option>");
   for(var i in obj){
    $("[name='shi_id']").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>");
   } 
  },
  "json"
 );
}


function shi(id){
 $.post(
  "citys", 
  {id:id},
  function(obj){
   $("[name='qu_id']").empty();//每次追加清空
   //追加一条请选择
   $("[name='qu_id']").append("<option value=''>请选择</option>");
   for(var i in obj){
    $("[name='qu_id']").append("<option value='"+obj[i].id+"'>"+obj[i].name+"</option>");
   } 
  },
  "json"
 );
}
</script>

<body>
<marquee>欢迎来到新增页面</marquee>
<center>
<form>
姓名:<input type="text" name="sname"><br>
性别:<input type="text" name="sex"><br>
地址:<input type="text" name="addr"><br>
名族:<select name="mid">
    <option value="">请选择</option>
    </select><br>
省:<select name="sheng_id" onchange="sheng(this.value)">
    <option value="">请选择</option>
    </select><br>
市:<select name="shi_id" onchange="shi(this.value)">
    <option value="">请选择</option>
    </select><br>
区:<select name="qu_id">
    <option value="">请选择</option>
    </select><br>
<input type="button" value="提交"><br>
</form>
</center>
</body>

控制层代码

 @RequestMapping("/toadd2")
  @ResponseBody
  public Object toadd2() {
   //查询两个部分 民族和省份
   List<Minzu> minzus = ss.getMinzu();
   int id=1;
   List<City> citys = ss.getCity(id);
   Map<String,Object> map = new HashMap();
   map.put("minzus", minzus);
   map.put("citys", citys);
   return map;
  }


 @RequestMapping("/citys")
  @ResponseBody
  public Object citys(int id) {
   List<City> citys = ss.getCity(id);
   return citys;
  }

LMY____梦阳� � �

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
省份,城市,地区的三级联动

这里只介绍页面的代码和控制层代码<script type="text/javascript">$(function(){ $.post( "toadd2", {}, function(obj){ var minzus = obj.minzus; var citys = obj.citys; for(var i in minzus){ ...
复制链接

扫一扫