select下拉框二级联动

最新推荐文章于 2024-04-08 02:51:25 发布

干干脆脆的小饼干6688

最新推荐文章于 2024-04-08 02:51:25 发布

阅读量2.2k

点赞数 3

分类专栏： Java HTML 文章标签： java

本文链接：https://blog.csdn.net/weixin_44020995/article/details/124209274

版权

Java 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

采用Layui框架

两种方法实现，差别不大
一、编写jsp代码
二、编写后台代码（方法一）
三、编写后台代码（方法二）
四、效果图
- 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">
 <!-- 引入 Bootstrap -->
 <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

<?xml version="1.0" encoding="UTF-8" ?>
<!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

<?xml version="1.0" encoding="UTF-8" ?>
<!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 示例二

在这里插入图片描述

干干脆脆的小饼干6688

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
select下拉框二级联动

采用Layui框架两种方法实现，差别不大一、编写jsp代码二、编写后台代码（方法一）2.1 工具类2.2 dao层2.3 编写对应xml2.4 service层2.5 serviceImp层2.6 Controller层三、编写后台代码（方法二）3.1 工具类3.2 dao层，这里返回Map3.3 编写对应xml3.4 service层3.5 serviceImp层3.6 Controller层四、效果图4.1 示例一4.2 示例二两种方法实现，差别不大一、编写jsp代码<%@ taglib p
复制链接

扫一扫