layui多级联动下拉框的实现_简单三级联动的实现
生活随笔
收集整理的這篇文章主要介紹了
layui多级联动下拉框的实现_简单三级联动的实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
當我們做一些例如注冊頁面的時候，可能會遇到要選擇地址的操作，這時會出現三個選擇框，當你選擇省級單位的時候會自動在選擇筐中，彈出她所屬的市級單位的列表，當選擇市級單位時又會彈出縣級單位，我們要實現的就是這樣的三級聯動，當然也會有更簡單的插件方法，但學習，我們可以通過這來看它運行的過程。我么要實現的需求是這樣的：
- 頁面中有三個下拉框選項，分別為省下拉框，市下拉框，區/縣下拉框
- 選擇省，則市下拉框中出現對應的該省下的市信息，選擇市，則區/縣下拉框中
- 出現對應的該市下面的區/縣信息
分析這個實現過程大致可以這樣：
- 1、創建頁面：頁面中有三個下拉框，分別為省、市、區/縣
- 2、頁面加載成功發起ajax請求，請求省的信息，并將響應結果 填充到省下拉框中
- 3、選擇省觸發一個新的js函數 的執行，該函數中發起新的ajax請求 請求該省下的市信息，并將響應數據填充到市下拉框
- 4、選擇市信息觸發一個新的js函數的執行，該函數中發起新的ajax請求 請求該市下的區/縣信息，并將數據填充到區/縣下拉框中
數據庫呢我們可以這樣去構建：
創建表(area)：存儲了省、市、區/縣信息
- 設計表實現一：只存儲了數據，但是數據之間的層級關系沒有存儲。
- 地區id:areaid
- 地區名:areaname
- 設計表實現二：
- 地區id:areaid
- 地區名:areaname
- 地區上級id：parentid
建表語句：
Create table area (areaid int auto_increment primary key,areaname varchar(10) not null, parenteid int(20) not null,arealevlel int(2) not null,status int(3) not null)創建好表之后就可以進行項目的構建了，在mvc思想下進行項目分層：
首先在pojo層新建實體類Area，他的屬性為：要添加共有取值賦值方法等，帶參無參構造等；
package com.bjsxt.pojo;public class Area {private int areaid;private String areaname;private int parentid;private int arealevel;private int status;之后便是業務服務層，要有AreaServive接口與其實現方法
package com.bjsxt.service;import java.util.List;import com.bjsxt.pojo.Area;public interface AreaService {List<Area> selByPid(int parentid);}package com.bjsxt.service.impl;import java.util.List;import com.bjsxt.dao.AreaDao; import com.bjsxt.dao.impl.AreaDaoImpl; import com.bjsxt.pojo.Area; import com.bjsxt.service.AreaService;public class AreaServiceImpl implements AreaService {AreaDao ad= new AreaDaoImpl();@Overridepublic List<Area> selByPid(int parentid) {return ad.selByPid(parentid);}}數據處理層
package com.bjsxt.dao;import java.util.List;import com.bjsxt.pojo.Area;public interface AreaDao {List<Area> selByPid(int parentid);}數據層實現類
ackage com.bjsxt.dao.impl;import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List;import com.bjsxt.dao.AreaDao; import com.bjsxt.pojo.Area; import com.bjsxt.util.DBUtil;public class AreaDaoImpl implements AreaDao {@Overridepublic List<Area> selByPid(int parentid) {//聲明Connection conn=null;PreparedStatement ps=null;ResultSet rs=null;List<Area> list=new ArrayList<>();try {conn=DBUtil.getConnection();String sql="select * from area where parentid=?";ps = conn.prepareStatement(sql);ps.setInt(1, parentid);rs=ps.executeQuery();while(rs.next()){Area ar=new Area();ar.setAreaid(rs.getInt("areaid"));ar.setAreaname(rs.getString("areaname"));ar.setParentid(rs.getInt("parentid"));ar.setArealevel(rs.getInt("arealevel"));ar.setStatus(rs.getInt("status"));list.add(ar);}} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}finally{DBUtil.closeAll(rs, ps, conn);}return list;}}還有DBUtil工具類，就是連接數據庫操作的一個工具類，很多種，就不列出來了。
接下來就servlet的構建
package com.bjsxt.servlet;import java.io.IOException; import java.util.List;import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import com.bjsxt.pojo.Area; import com.bjsxt.service.AreaService; import com.bjsxt.service.impl.AreaServiceImpl; import com.google.gson.Gson;public class AreaServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {//設置編碼格式req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");//獲取請求數據int parentid = Integer.parseInt(req.getParameter("parentid"));//處理請求數據AreaService ar= new AreaServiceImpl();List<Area> list= ar.selByPid(parentid);//處理響應//直接相應resp.getWriter().write(new Gson().toJson(list));} }項目展示jsp頁面構建
%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><base href="<%=basePath%>"><title>My JSP 'select.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="js/jquery-1.9.1(1).js"></script><script type="text/javascript">$(function() {//默認省的信息getData(0,"pre");//選擇市$("#pre").change(function(){var areaid=$("#pre").val();getData(areaid,"shi");})//縣的信息$("#shi").change(function(){var areaid=$("#shi").val();getData(areaid,"xian");})function getData(areaid,sid) {$.get("area",{parentid:areaid},function(data){//將省數據放入到下拉框//使用eval將數據轉化為json格式對象eval("var areas="+data);var sel=$("#"+sid);sel.empty();//遍歷：for(var i=0;i<areas.length;i++){sel.append("<option value="+areas[i].areaid+">"+areas[i].areaname+"</option>");}$("#"+sid).trigger("change"); })} })</script></head><body style="background-color: activecaption;text-align:center" ><div style="margin: auto;width=800px;margin-top: 200px">省：<select name="" id="pre" style="width:200px;height:30px;"></select>市：<select name="" id="shi" style="width:200px;height:30px;"></select>縣：<select name="" id="xian" style="width:200px;height:30px;"></select></div></body> </html>總結
以上是生活随笔為你收集整理的layui多级联动下拉框的实现_简单三级联动的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python美女源代码_python程序
- 下一篇： linux集成开发环境