layui 下拉框三级联动

本文记录了使用layui框架创建三级联动下拉框的过程,包括表结构设计、mybatis查询映射、页面元素和js代码实现,展示了最终的页面效果,并提供了联动SQL查询的下载链接。

项目需要用layui的三级联动,自己瞎整了一下,做个记录

1.表结构设计

CREATE TABLE `dt_area` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '区域主键',
  `area_name` varchar(16) DEFAULT NULL COMMENT '区域名称',
  `area_code` varchar(128) DEFAULT NULL COMMENT '区域代码',
  `area_short` varchar(32) DEFAULT NULL COMMENT '区域简称',
  `area_is_hot` varchar(1) DEFAULT NULL COMMENT '是否热门(0:否、1:是)',
  `area_sequence` int(11) DEFAULT NULL COMMENT '区域序列',
  `area_parent_id` int(11) DEFAULT NULL COMMENT '上级主键',
  `init_date` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '初始时间',
  PRIMARY KEY (`id`),
  KEY `parent_id` (`area_parent_id`) USING HASH
) ENGINE=InnoDB AUTO_INCREMENT=900001 DEFAULT CHARSET=utf8 COMMENT='区域字典';

2.mybatis xml

<select id="queryByParentId" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
  select
  <include refid="Base_Col
layui中实现三级联动下拉框,可以通过以下步骤实现: 1. 在HTML页面中定义三个下拉框的DOM元素,分别为省、市、县: ```html <div class="layui-form-item"> <label class="layui-form-label">省份</label> <div class="layui-input-inline"> <select name="province" id="province"> <option value="">请选择省份</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select name="city" id="city"> <option value="">请选择城市</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">区县</label> <div class="layui-input-inline"> <select name="area" id="area"> <option value="">请选择区县</option> </select> </div> </div> ``` 2. 使用ajax获取省份数据并填充到省份下拉框中: ```javascript // 获取省份数据 $.ajax({ url: '/getProvince', type: 'GET', success: function (data) { var html = '<option value="">请选择省份</option>'; $.each(data, function (i, item) { html += '<option value="' + item.id + '">' + item.name + '</option>'; }); $('#province').html(html); layui.form.render('select'); } }); ``` 3. 给省份下拉框绑定change事件,在省份改变时,使用ajax获取城市数据并填充到城市下拉框中: ```javascript // 绑定省份change事件 layui.form.on('select(province)', function (data) { // 获取城市数据 $.ajax({ url: '/getCity', type: 'GET', data: {provinceId: data.value}, success: function (data) { var html = '<option value="">请选择城市</option>'; $.each(data, function (i, item) { html += '<option value="' + item.id + '">' + item.name + '</option>'; }); $('#city').html(html); layui.form.render('select'); } }); }); ``` 4. 给城市下拉框绑定change事件,在城市改变时,使用ajax获取区县数据并填充到区县下拉框中: ```javascript // 绑定城市change事件 layui.form.on('select(city)', function (data) { // 获取区县数据 $.ajax({ url: '/getArea', type: 'GET', data: {cityId: data.value}, success: function (data) { var html = '<option value="">请选择区县</option>'; $.each(data, function (i, item) { html += '<option value="' + item.id + '">' + item.name + '</option>'; }); $('#area').html(html); layui.form.render('select'); } }); }); ``` 5. 在后端编写获取省份、城市、区县数据的接口,根据前端传递的参数查询对应的数据并返回。 ```javascript // 获取省份数据 app.get('/getProvince', function (req, res) { var sql = 'select id, name from province'; db.query(sql, function (err, result) { if (err) throw err; res.json(result); }); }); // 获取城市数据 app.get('/getCity', function (req, res) { var provinceId = req.query.provinceId; var sql = 'select id, name from city where province_id = ?'; db.query(sql, [provinceId], function (err, result) { if (err) throw err; res.json(result); }); }); // 获取区县数据 app.get('/getArea', function (req, res) { var cityId = req.query.cityId; var sql = 'select id, name from area where city_id = ?'; db.query(sql, [cityId], function (err, result) { if (err) throw err; res.json(result); }); }); ``` 以上就是使用layui实现三级联动下拉框的步骤。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值