利用数据库,jQuery,js实现省市县三级联动

最新推荐文章于 2021-05-09 22:46:10 发布

xilin6664

最新推荐文章于 2021-05-09 22:46:10 发布

阅读量735

点赞数 1

本文链接：https://blog.csdn.net/xilin6664/article/details/90113503

版权

在数据库中存入省市县的简单模拟数据,让市的c_pid等于省pid,县的c_tid等于市的cid;

整体流程为:从首页点击超链接,进入servlet中查询到数据库中的省市县的信息保存到各自的集合中,集合的泛型分别为

Province,

City,

Town(省,市,县),前提在domain包中创建各自的类(省市县),然后通过重定向将数据传到jsp页面中,在页面中获取到省的信息,循环遍历输出到对应的下拉框中.将市和县的所有信息保存到隐藏框中备用.在jsp页面中导入jQuery的包.通过change事件实现省市县三级联动.参考代码如下发:

首页写一个超链接地址为servlet,此代码略.

servlet代码:

//到数据库查询,并将结果给页面
public class DemoServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //到数据库中查询所有数据并返回给页面
        MyService ms = new MyService();
        List<Province> provinces = ms.selectProvince();
        List<City> cities = ms.selectCity();
        List<Town> towns = ms.selectTown();
        HttpSession session = request.getSession();
        session.setAttribute("provinces",provinces);
        session.setAttribute("cities",cities);
        session.setAttribute("towns",towns);
        response.sendRedirect(request.getContextPath()+"/three.jsp");//重定向

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doPost(request,response);
    }

}

service层和dao层的代码:

public List<Province> selectProvince() {
    return showDao.selectProvince();
}

public List<City> selectCity() {
    return showDao.selectCity();
}

public List<Town> selectTown() {
    return showDao.selectTown();
}

public List<Province>  selectProvince() {
    String sql = "select * from province";
    List<Province> list = jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Province.class));
    return list;
}

public  List<City> selectCity() {
    String sql = "select * from city";
    List<City> list = jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(City.class));
    return list;
}

public List<Town> selectTown() {
    String sql = "select * from town";
    List<Town> list = jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Town.class));
    return list;
}

页面代码为:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
    <head>
       <base href="<%=basePath%>"/>
        <!-- 指定字符集 -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>省市县联动</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery-3.3.1.js"></script>
        <script src="js/bootstrap.min.js"></script>
       
        <script>
            $(function () {
                $("#provinceId").change(function () {
                    //获取当前省的id
                    var proId=$(this).val();
                    //初始化市和县
                    $("#cityId").html("<option name =\"citname\" >请选择市</option>");
                    $("#townId").html("<option name =\"towname\" >请选择县</option>");
                    //获取所有的市的集合
                   var cityArr = $("input[type=hidden][name=citys]");
                   //获取所有县的集合
                    var townArr = $("input[type=hidden][name=towns]");
                   //遍历市的集合找到和当前省id对应的市添加到市的下拉框中
                   for (var i=0;i<cityArr.length;i++) {
                     var cpid=cityArr[i].getAttribute("cpid");
                       var cityId = cityArr[i].getAttribute("cid");
                       var cityname = $(cityArr[i]).val();
                       if (proId == cpid) {
                         $("#cityId").append("<option name ='citname' value="+cityId+">"+cityname+"</option>");
                     }
                   }

                   $("#cityId").change(function () {
                       //获取当前市的id属性值
                       var citId =$(this).val();
                           //初始化县
                       $("#townId").html("<option name =\"towname\" >请选择县</option>");
                       //遍历所有县的集合找到和当前市id相对应的县添加到下拉框中
                       for(var j=0;j<townArr.length;j++) {
                           var tcid=townArr[j].getAttribute("tcid");
                           var tname=$(townArr[j]).val();
                           var townId=townArr[i].getAttribute("tid");
                           if(citId == tcid) {
                               $("#townId").append("<option name ='towname' value="+townId+" >"+tname+"</option>");
                           }
                       }

                   });
                });
            })
        </script>
    </head>

    <body>
    <c:if test="${!empty cities}">
        <c:forEach items="${cities}" var="city">
            <input type="hidden" name="citys" value=" ${city.cname}" cpid="${city.c_pid}" cid=" ${city.cid}" />
        </c:forEach>
    </c:if>
    <c:if test="${!empty towns}">
        <c:forEach items="${towns}" var="town">
            <input type="hidden" name="towns" value=" ${town.tname}" tcid="${town.t_cid}" tid=" ${town.tid}" />
        </c:forEach>
    </c:if>
        <div class="container" style="width: 400px;">
        <h3 style="text-align: center;">省市县联动</h3>
        <form action="/day05/update" method="post">

      <div class="form-group">
        <label >籍贯：</label>
        <select name="address" class="form-control"  id="provinceId">
           <option >请选择省</option>
             <c:if test="${! empty provinces}">
                 <c:forEach items="${provinces}" var="province">
           <option  name ="proname" value="${province.pid}" >${province.pname}</option>
             </c:forEach>
             </c:if>
        </select>
          <select name="address" class="form-control" id="cityId" >
              <option name ="citname" >请选择市</option>
             
             
          </select>
          <select name="address" class="form-control" id="townId" >
              <option name ="towname" >请选择县</option>
              
          </select>
      </div>
        </form>
        </div>
        
    </body>

实现效果图为(在下拉框中选择省会弹出对应的市供选择,选择市会列出对应的县供选择);

xilin6664

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用数据库,jQuery,js实现省市县三级联动

在数据库中存入省市县的简单模拟数据,让市的c_pid等于省pid,县的c_tid等于市的cid;整体流程为:从首页点击超链接,进入servlet中查询到数据库中的省市县的信息保存到各自的集合中,集合的泛型分别为Province,City,Town(省,市,县),前提在domain包中创建各自的类(省市县),然后通过重定向将数据传到jsp页面中,在页面中获取到省的信...
复制链接

扫一扫