三级联动的查看回显

最新推荐文章于 2022-10-12 18:23:22 发布

LMY____梦阳� � �

最新推荐文章于 2022-10-12 18:23:22 发布

阅读量2k

点赞数 1

分类专栏：三级联动的查看回显文章标签：三级联动的查看回显

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

版权

三级联动的查看回显专栏收录该内容

1 篇文章 0 订阅

订阅专栏

默认省的父级id为0 通过一系列jquery函数先实现三级联动,再进行回显

var cid=0;
$(function(){
 $.post(
  "citys",
  {cid:cid},
  function(obj){
   for(var i in obj){
    $("[name='c1']").append("<option value='"+obj[i].cid+"'>"+obj[i].cname+"</option>");
   }
   $("[name='c1']").val('${emp.c1}')
  },
  "json"
 );

 var c1= ${emp.c1}
 $.post(
  "city1",
  {c1:c1},
  function(obj){
   for(var i in obj){
    $("[name='c2']").append("<option value='"+obj[i].cid+"'>"+obj[i].cname+"</option>");
   }
   $("[name='c2']").val('${emp.c2}')
  },
  "json"
 );

 var c2 = ${emp.c2}
 $.post(
  "city2",
  {c2:c2},
  function(obj){
   for(var i in obj){
    $("[name='c3']").append("<option value='"+obj[i].cid+"'>"+obj[i].cname+"</option>");
   }
   $("[name='c3']").val('${emp.c3}')
  },
  "json"
 );
 })
 以上第 一个为查询所有的省和省的回显 ,第二个和第三个为市和区的回显


//根据onchange改变事件查出所有的市
function getCity1(cid){
 $.post(
  "citys",
  {cid:cid},
  function(obj){
   $("[name='c2']").empty();
   $("[name='c2']").append("<option value=''>所属市</option>");   
   $("[name='c3']").empty();
   $("[name='c3']").append("<option value=''>所属区</option>");   
   for(var i in obj){
    $("[name='c2']").append("<option value='"+obj[i].cid+"'>"+obj[i].cname+"</option>");
   }
  },
  "json"
 );
}

//根据onchange改变事件查出所有的区
function getCity2(cid){
 $.post(
  "citys",
  {cid:cid},
  function(obj){
   $("[name='c3']").empty();
   $("[name='c3']").append("<option value=''>所属区</option>");
   for(var i in obj){
    $("[name='c3']").append("<option value='"+obj[i].cid+"'>"+obj[i].cname+"</option>");
   }
  },
  "json"
 );
}

</script>
</head>
<body>
<center>


 <form>
 ID:<input type="text" name="eid" readonly="readonly" value="${emp.eid }"><br>
 姓名:<input type="text" name="ename" value="${emp.ename }"><br>
 性别:<input type="radio" name="esex" value="男" ${emp.esex=='男'?'checked':'' }>男&nbsp;&nbsp;&nbsp;
     <input type="radio" name="esex" value="女" ${emp.esex=='女'?'checked':'' }>女<br>
 日期:<input type="text" name="edate" onclick="WdatePicker()" value="${emp.edate }"><br>
  省: <select name="c1" onchange="getCity1(this.value)">改变事件
  <option value="0">所属省</option>
  </select><br>
  市: <select name="c2" onchange="getCity2(this.value)">改变事件
  <option value="0">所属市</option>
  </select><br>
  区: <select name="c3">
  <option value="0">所属区</option>
  </select><br>
 </form>
</center>

</body>
</html>

controller层

三级联动的实现都用这一个分支解决
   @RequestMapping("/citys")
   @ResponseBody
   public List citys(int cid) {
    return empService.getCity(cid);
   }

用于回显
   @RequestMapping("/city1")
   @ResponseBody
   public List city1(int c1) {
    return empService.getCity1(c1);
   }  
   @RequestMapping("/city2")
   @ResponseBody
   public List city2(int c2) {
    return empService.getCity2(c2);
   }  

查询对象
   @RequestMapping("/tock")
   public String tock(int eid,Model model) {
   Emp emp = empService.getEmp(eid);
   System.out.println("==="+emp);
   model.addAttribute("emp", emp);
   return "ck";
   }

dao层

   <select id="getCity" resultType="com.my.bean.City">
   select * from city where pid=#{cid}
   </select>

   <select id="getCity1" resultType="com.my.bean.City">
   select * from city where pid=#{c1}
   </select>

   <select id="getCity2" resultType="com.my.bean.City">
   select * from city where pid=#{c2}
   </select>


   <select id="getEmp" resultType="com.my.bean.Emp">
   select * from emp where eid=#{eid}
   </select>

LMY____梦阳� � �

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三级联动的查看回显

默认省的父级id为0 通过一系列jquery函数先实现三级联动,再进行回显var cid=0;$(function(){ $.post( "citys", {cid:cid}, function(obj){ for(var i in obj){ $("[name='c1']").append("<option value='"+obj[i].cid+"'&gt...
复制链接

扫一扫