layui实现省市级联，刷新之后可以看到上次显示的数据上次的数据

最新推荐文章于 2023-08-25 22:22:24 发布

大步向前走，此生莫回头

最新推荐文章于 2023-08-25 22:22:24 发布

阅读量332

点赞数

分类专栏： spring spingmvc springMVC 文章标签： java js

本文链接：https://blog.csdn.net/qq_41778382/article/details/107950768

版权

本文介绍如何使用layui实现省市级联选择，并在页面刷新后保持上次选择的状态。通过前端JS代码分三步操作：获取后端存储的上次选择数据、设置省级默认选项及监听事件，以及根据省级变化动态加载市级选项。同时，市级选项改变会自动提交到后端。后端则负责存储和提供省份信息，以及根据省份ID获取市ID。

摘要由CSDN通过智能技术生成

设置layui的下拉选择框的默认选项花了我巨大功夫，最后从网上找到了答案

前端js代码分三个部分

从后端获取上次存储的数据
进入页面后刷新页面，添加省级选项，并根据获取的上次保存的数据实现省级的默认选项
对省级选项的标签加入动态监听事件，监听省级选项的改变后，添加市级选项，并根据上次保存的数据，对市级选项选中
市级选项一旦改变就会自动提交给数据的给后端的session

后端代码部分：
5. 后端session存储的省份的值，发送给前端
6. 查取所有省份对象
7. 根据省份的id查取市的id
8. 接受前端发送的省份的对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" rel="stylesheet">
	</head>
	<body>
		<div class="layui-container">
			<form action="" class="layui-form">
				<div class="layui-form-item">
					<label class="layui-form-label">省市联动</label>
					    <div class="layui-input-inline" id="s1">	
					      <select id="select1" lay-filter="select1">
					        <!-- <option value="0">请选择省份</option> -->
					      </select>
					    </div>
					    <div class="layui-input-inline">
					      <select id="select2" lay-filter="select2">
							<!-- <option value="0">请选择城市</option> -->
					      </select>
					    </div>
			</div>