select下拉框二级联动
采用Layui框架
- 两种方法实现，差别不大
- 一、编写jsp代码
- 二、编写后台代码（方法一）
-
- 2.1 工具类
- 2.2 dao层
- 2.3 编写对应xml
- 2.4 service层
- 2.5 serviceImp层
- 2.6 Controller层
- 三、编写后台代码（方法二）
-
- 3.1 工具类
- 3.2 dao层，这里返回Map
- 3.3 编写对应xml
- 3.4 service层
- 3.5 serviceImp层
- 3.6 Controller层
- 四、效果图
-
- 4.1 示例一
- 4.2 示例二
两种方法实现，差别不大
一、编写jsp代码
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js">script>
<link rel="stylesheet" type="text/css"
href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css" />
<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js">script>
<title>下拉框二级联动title>
head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="page-header">
<h1>
<small>下拉框二级联动small>
h1>
div>
div>
div>
<form class="layui-form" action="${pageContext.request.contextPath }/reserve/reserveVaccine" method="post">
<div class="layui-form-item">
<label class="layui-form-label">预约日期label>
<div class="layui-input-inline">
<select name="timeDateReserve" id="timeDateReserve" lay-filter="timeDateReserve">
<option value="">请选择预约日期option>
select>
div>
div>
<div class="layui-form-item">
<label class="layui-form-label">具体时间label>
<div class="layui-input-inline">
<select name="timePeriodReserve" id="timePeriodReserve">
<option value="">请选择具体时间option>
select>
div>
div>
form>
div>
<script type="text/javascript">
layui.use(['layer', 'form', 'table', 'layedit', 'laydate', 'jquery'], function () {
// layui引入需要的组件
var form = layui.form;
var laydate = layui.laydate;
var layer = layui.layer;
var $ = layui.jquery;
// 二级联动,先渲染父级
$(function () {
//加载机构类型
$.ajax({
url: '${pageContext.request.contextPath }/timePeriod/allDate',// 后台获取日期
dataType: 'json',
async: false,
cache: false,
data:{
'state': 0 //查询状态为正常的所有机构类型
},
type: 'post',
success: function (res) {
$.each(res.data, function (index, item) {
$('#timeDateReserve').append(new Option(item));// 下拉菜单里添加元素
});
//渲染select
layui.form.render("select");
},error: function () {
alert("查询失败");
}
});
});
// 然后监听父级，每当父级发生变化时，渲染子级
form.on('select(timeDateReserve)', function(data){
var timeDateReserve = data.value; // timeDateReserve 选中的预约日期
$.ajax({
url: '${pageContext.request.contextPath }/timePeriod/timePeriodByDate',
dataType: 'json',
type: 'post',
data: {timeDateReserve:timeDateReserve}, // 传入预约日期，查找该日期的所有时间段
success: function (resData) {
// 清空时间段
$('#timePeriodReserve').empty();
$.each(resData.data, function (index, value) {
$('#timePeriodReserve').append(new Option(value));// 下拉菜单里添加元素
});
//渲染select
form.render('select');
}
});
});
});
script>
body>
html>
二、编写后台代码（方法一）
2.1 工具类
package per.Kidd.utils;
import java.util.ArrayList;
import java.util.List;
import io.swagger.annotations.Api;
import lombok.*;
@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder(toBuilder = true)
@Api("从数据库获取的值放在ResponseResult的data中")
public class ResponseResult<T> {
private int code; // 0:success 1:failure
private String msg; // 返回信息
//private int count; // 总记录数
private List<String> data;
public ResponseResult(List<String> list) {
if(list != null) {
//this.count = list.size();
this.code = 0;
this.msg = "success";
this.data = list;
}
else {
//this.count = 0;
this.code = 1;
this.msg = "error";
this.data = new ArrayList<>();
}
}
}
2.2 dao层
package per.Kidd.dao;
import java.util.List;
import java.util.Map;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import per.Kidd.utils.ResponseResult;
@Repository
public interface TimePeriodMapper {
// 查询时间段
ResponseResult<String> queryByDate(String date);
}
2.3 编写对应xml
DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="per.Kidd.dao.TimePeriodMapper">
<select id="queryAllTimeByDate" resultType="String">
select distinct timePeriod from tb_time_period
<where>
<if test="date != null and date != ''">
date like concat('%',#{date},'%')
if>
where>
select>
mapper>
2.4 service层
package per.Kidd.service;
import org.apache.ibatis.annotations.Param;
import per.Kidd.utils.ResponseResult;
public interface TimePeriodService {
ResponseResult<String> queryByDate(String date);
}
2.5 serviceImp层
package per.Kidd.service.Impl;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.ibatis.annotations.Param;
import per.Kidd.bean.TimePeriod;
import per.Kidd.bean.VaccineType;
import per.Kidd.dao.TimePeriodMapper;
import per.Kidd.service.TimePeriodService;
import per.Kidd.utils.ResponseResult;
public class TimePeriodServiceImpl implements TimePeriodService {
//service调用dao层的操作，设置一个set接口，方便Spring管理
private TimePeriodMapper timePeriodMapper;
public void setTimePeriodMapper(TimePeriodMapper timePeriodMapper) {
this.timePeriodMapper = timePeriodMapper;
}
@Override
public ResponseResult<String> queryByDate(String date) {
List<String> list = timePeriodMapper.queryAllTimeByDate(date);
ResponseResult<String> result = new ResponseResult<>(list);
return result;
}
}
2.6 Controller层
@Controller
@RequestMapping("/timePeriod")
public class TimePeriodController {
@RequestMapping(value = "/timePeriodByDate", method = RequestMethod.POST , produces = "application/json; charset=utf-8")
@ResponseBody
public ResponseResult<String> queryTimePeriodByDate(String timeDateReserve) {
return timePeriodService.queryByDate(timeDateReserve);
}
}
三、编写后台代码（方法二）
3.1 工具类
package per.Kidd.utils;
import java.util.ArrayList;
import java.util.List;
import io.swagger.annotations.Api;
import lombok.*;
@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder(toBuilder = true)
@Api("从数据库获取的值放在ResponseResult的data中")
public class ResponseResult<T> {
private int code; // 0:success 1:failure
private String msg; // 返回信息
//private int count; // 总记录数
private List<String> data;
public ResponseResult(List<String> list) {
if(list != null) {
//this.count = list.size();
this.code = 0;
this.msg = "success";
this.data = list;
}
else {
//this.count = 0;
this.code = 1;
this.msg = "error";
this.data = new ArrayList<>();
}
}
}
3.2 dao层，这里返回Map
package per.Kidd.dao;
import java.util.List;
import java.util.Map;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
@Repository
public interface TimePeriodMapper {
// 查询时间段
Map<String,Object> queryAllByDate(String date);
}
3.3 编写对应xml
DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="per.Kidd.dao.TimePeriodMapper">
<select id="queryAllTimeByDate" resultType="String">
select distinct timePeriod from tb_time_period
<where>
<if test="date != null and date != ''">
date like concat('%',#{date},'%')
if>
where>
select>
mapper>
3.4 service层
package per.Kidd.service;
import org.apache.ibatis.annotations.Param;
import java.util.Map;
public interface TimePeriodService {
Map<String,Object> queryAllByDate(String date);
}
3.5 serviceImp层
package per.Kidd.service.Impl;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.apache.ibatis.annotations.Param;
import per.Kidd.bean.TimePeriod;
import per.Kidd.bean.VaccineType;
import per.Kidd.dao.TimePeriodMapper;
import per.Kidd.service.TimePeriodService;
import per.Kidd.utils.ResponseResult;
public class TimePeriodServiceImpl implements TimePeriodService {
//service调用dao层的操作，设置一个set接口，方便Spring管理
private TimePeriodMapper timePeriodMapper;
public void setTimePeriodMapper(TimePeriodMapper timePeriodMapper) {
this.timePeriodMapper = timePeriodMapper;
}
@Override
public Map<String, Object> queryAllByDate(String date) {
Map map = new HashMap();
List<String> list = timePeriodMapper.queryAllTimeByDate(date);
try {
map.put("msg", "success");
map.put("code", 0);
map.put("data", list);
} catch (Exception e) {
e.printStackTrace();
map.put("msg", "error");
map.put("code", 1);
}
return map;
}
}
3.6 Controller层
@Controller
@RequestMapping("/timePeriod")
public class TimePeriodController {
@RequestMapping(value = "/timePeriodByDate", method = RequestMethod.POST , produces = "application/json; charset=utf-8")
@ResponseBody
public String queryTimePeriodByDate(String timeDateReserve) {
Map<String, Object> map = timePeriodService.queryAllByDate(timeDateReserve);
String json = JSON.toJSONString(map);
return json;
}
}
四、效果图
4.1 示例一
4.2 示例二
