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多级联动下拉框的实现_简单三级联动的实现相关推荐

android 下拉菜单触发_Android实现三级联动下拉框城市选择器（简单）
主要实现办法:动态加载各级下拉值的适配器在监听本级下拉框,当本级下拉框的选中值改变时,随之修改下级的适配器的绑定值先贴出效果图: 主布局代码: xmlns:tools="http://s ...
javascript实现下拉条联动_js实现多级联动下拉框
花了半天时间实现一个多级联动下拉框,目的是对某一植物进行"门纲目科属"的归类.使用的技术是javascript+xml,之所以不用数据库,一来这方面的数据虽然量大但都是固定不变的, ...
Excel制作导入模板，多级联动下拉框（一整列的设置），修改一级下拉框内容，自动清空二级内容
目录效果展示一.数据准备二.模板制作原因1:为空原因二:名称管理器数据有误三.修改一级下拉框内容,自动清空二级内容 1,效果演示 2,实际操作效果展示一.数据准备 1,新建一张表,在s ...
下拉框丿html宙斯,无限级别js联动下拉框类
/* ** ============================================================================================== ...
Ajax实现无刷新三联动下拉框
1.html代码 <HTML> <HEAD> <title>Ajax实现无刷新三联动下拉框</title> &l ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
layui给select下拉框赋值
layui给select下拉框赋值 //重新渲染表单函数function renderForm() {layui.use('form', function() {var form = layui.fo ...
一个大数据量表访问优化--联动下拉框查询优化
问题描述有一数据表(产品标签表,每个产品一个唯一的SN,每月100万左右),查询界面上有2个联动下拉框,[规格]____,[批次]______ 用户选择一个规格后(目前200来个规格),列出该规格下达 ...
联动下拉框显示省市县
首先,这次用到的知识点有三层的逻辑还有连接数据库知识以及传参知识点,废话不多说,首先展示页面: 首先第一本机的数据库,连接字符创写在app.cofing里,这个不用多说了: <configura ...

layui多级联动下拉框的实现_简单三级联动的实现

layui多级联动下拉框的实现_简单三级联动的实现相关推荐

最新文章

热门文章