三级联动以及下拉框回显

最新推荐文章于 2021-08-22 15:49:07 发布

火箭少女的秃顶计划

最新推荐文章于 2021-08-22 15:49:07 发布

阅读量891

点赞数

文章标签： java

本文链接：https://blog.csdn.net/qq_35733604/article/details/106091074

版权

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表展示页面</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resource/bootstrap4/css/bootstrap.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/jquery/jquery-3.4.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/bootstrap4/js/bootstrap.js"></script>
<script type="text/javascript">
   $(function() {
       //查询省
       $.post("./findAllArea",{}, function(data) {
           var ids = '${vo.provinceId}';
           for ( var i in data) {
               if(data[i].id==ids){
                   $("[name='provinceId']").append("<option value='"+data[i].id+"' selected='selected'>"+data[i].name+"</option>");
               }else{
                   $("[name='provinceId']").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
               }
           }
       });

       //当省份改变的时候查询市
       $("[name='provinceId']").change(function() {
           var pid = $(this).val();
           $.post("./findAllAreaByPid",{pid:pid}, function(data) {
               $("[name='cityId']").html("");
               $("[name='cityId']").append("<option value=>请选择市</option>");
               for ( var i in data) {
                   $("[name='cityId']").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
               }
           });
       });


       var pid = '${vo.provinceId}';
       var cid = '${vo.cityId}';
       $.post("./findAllAreaByPid",{pid:pid}, function(data) {
           for ( var i in data) {
               if(data[i].id==cid){
                   $("[name='cityId']").append("<option value='"+data[i].id+"' selected='selected'>"+data[i].name+"</option>");
               }else{
                   $("[name='cityId']").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
               }

           }
       });




       //当市改变的时候查询区和县城
       $("[name='cityId']").change(function() {
           var pid = $(this).val();
           $.post("./findAllAreaByPid",{pid:pid}, function(data) {
               $("[name='countyId']").html("");
               $("[name='countyId']").append("<option value=>请选择区县</option>");
               for ( var i in data) {
                   $("[name='countyId']").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
               }
           });
       });


       var ppid = '${vo.cityId}';
       var ccid = '${vo.countyId}';
       $.post("./findAllAreaByPid",{pid:ppid}, function(data) {
           $("[name='countyId']").html("");
           $("[name='countyId']").append("<option value=>请选择区县</option>");
           for ( var i in data) {
               if(data[i].id==ccid){
                   $("[name='countyId']").append("<option value='"+data[i].id+"' selected='selected'>"+data[i].name+"</option>");
               }else{
                   $("[name='countyId']").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
               }

           }
       });




       //当省份改变的时候县区也改变
       $("[name='provinceId']").change(function() {
           $("[name='countyId']").html("");
           $("[name='countyId']").append("<option value=>请选择区县</option>");
       });


       //查询所有的科室
       //查询省
       $.post("./findAllDepart",{}, function(data) {
           for ( var i in data) {
               $("[name='departId']").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
           }
           //科室回显
           $("[name='departId']").val(${vo.departId});
       });



       //全选全部选
       $("[name='check']").change(function() {
           if($(this).is(":checked")){
               $("[name='checkbox']").attr("checked",true);
           }else{
               $("[name='checkbox']").attr("checked",false);
           }
       });

       //性别回显
       $("[name='sex']").val(${vo.sex});

   });

   //分页
   function fenye(pageNum) {
       $("[name='pageNum']").val(pageNum);
       $("form").submit();
   }

   //添加
   function addTo() {
       location = "addTo";
   }

   //修改
   function updateTo(id) {
       location = "updateTo?id="+id;
   }

   //单删
   function deleteOne(id) {
       if(confirm("确定要删除这条数据嘛？")){
           $.post("./deleteOne",{id:id}, function(data) {
               if(data){
                   alert("删除成功！！！");
                   location = "findAll";
               }else{
                   alert("删除失败！！！");
               }
           });
       }
   }

   function plshanchu() {

       var ids = "";
       $("[name='checkbox']:checked").each(function() {
           ids+=$(this).val()+",";
       });
       ids = ids.substring(0,ids.length-1);
       if(confirm("确定要删除这些数据嘛？")){
           $.post("./delete",{ids:ids}, function(data) {
               if(data){
                   alert("删除成功！！！");
                   location = "findAll";
               }else{
                   alert("删除失败！！！");
               }
           });
       }
   }
</script>
</head>
<body>
   <form action="findAll" style="margin-top: 50px;" method="post">
       <input type="hidden" name="pageNum">
       姓名查询：<input type="text" name="name" value="${vo.name }">
       性别：<select name="sex">
               <option value="-1">请选择性别</option>
               <option value="1">男</option>
               <option value="0">女</option>
           </select>
       省份：<select name="provinceId">
               <option value="-1">请选择省份</option>
           </select>
       市：<select name="cityId">
               <option value="-1">请选择市</option>
           </select>
       区县：<select name="countyId">
               <option value="-1">请选择区县</option>
           </select>
       科室：<select name="departId">
               <option value="-1">请选择科室</option>
           </select>
       年龄区间：<input type="text" name="minAge" value="${vo.minAge }">--<input type="text" name="maxAge" value="${vo.maxAge }">
       <button class="btn btn-primary">查询</button>
   </form>
   <button οnclick="addTo()">添加</button>
   <button οnclick="plshanchu()">批量删除</button>
   <table class="table table-hover" style="margin-top: 20px;">
       <tr>
           <th>
               <input type="checkbox" name="check">
           </th>
           <th>姓名</th>
           <th>性别</th>
           <th>生日</th>
           <th>年龄</th>
           <th>省</th>
           <th>市</th>
           <th>县</th>
           <th>科室</th>
           <th>擅长</th>
           <th>工龄</th>
           <th>头像</th>
           <th>操作</th>
       </tr>
       <c:forEach items="${info.list }" var="d">
           <tr style="line-height: 50px;">
               <td>
                   <input type="checkbox" name="checkbox" value="${d.id }">
               </td>
               <td>${d.name }</td>
               <td>${d.sex==1?"男":"女" }</td>
               <td>
                   <fmt:formatDate value="${d.birthday }" pattern="MM-dd"/>
               </td>
               <td>${d.age }</td>
               <td>${d.province.name }</td>
               <td>${d.city.name }</td>
               <td>${d.county.name }</td>
               <td>${d.depart.name }</td>
               <td>
                   <c:forEach items="${d.skills }" var="s">
                       ${s.name },
                   </c:forEach>
               </td>
               <td>${d.workAge }</td>
               <td>
                   <img alt="" src="/pic/${d.img }" width="50" height="50">
               </td>
               <td>
                   <button οnclick="updateTo(${d.id})">修改</button>
                   <button οnclick="deleteOne(${d.id})">删除</button>
               </td>
           </tr>
       </c:forEach>
       <tr>
           <td colspan="12" align="center">
               <button οnclick="fenye(1)">首页</button>    
               <button οnclick="fenye(${info.prePage==0?1:info.prePage})">上一页</button>    
               <button οnclick="fenye(${info.nextPage==0?info.pages:info.nextPage})">下一页</button>    
               <button οnclick="fenye(${info.pages})">尾页</button>    
               当前${info.pageNum }/${info.pages }页     
               共${info.total }条数据
           </td>
       </tr>
   </table>
</body>
</html>