layui实现下拉框联动

1.html加载界面

<div class="layui-inline" style="margin-bottom: 15px;">
 <label class="layui-form-label">楼栋号:</label>
 <div class="layui-input-inline" style="width:100px">
  <select name="buildId" id="buildId"  lay-filter="buildingFilter" lay-search="">
   <option value=""></option>
  </select>
 </div>
</div>
<div class="layui-inline" style="margin-bottom: 15px;">
 <label class="layui-form-label" style="color: black">房门号:</label>
 <div class="layui-input-inline" style="width:100px">
  <select name="houseId" id="houseId" lay-filter="houseIdFilter" lay-search="">
   <option value=""></option>
  </select>
 </div>
</div>

2.js调方法

// 得到楼栋
function getBuilding() {
 $.ajax({
  url: this.api+"/WyStoriedBuilding/list",
  dataType: 'json',
  type: 'post',
  success: function (data) {
   $.each(data, function (index, item) {
    $('#buildId').append(new Option(item.name, item.id));// 下拉菜单里添加元素
   });
   layui.form.render("select");//重新渲染 固定写法
  }
 });
};
// 得到房门号
function getHousing(data) {
 var params={
  buildingId:data.value
 }
 //检查项目添加到下拉框中
 $.ajax({
  url: this.api+"/WyHousingInformation/getHousing",
  dataType: 'json',
  data : JSON.stringify(params),
  contentType: "application/json",  
  type: 'post',
  success: function (data) {
   $("#houseId").empty();//清空下拉框的值
   $.each(data, function (index, item) {
    $('#houseId').append(new Option(item.name, item.id));// 下拉菜单里添加元素
   });
   layui.form.render("select");//重新渲染 固定写法
  }
 });
};
// 联动
layui.use('form', function(){
 form.on('select(buildingFilter)', function(data){
  this.getHousing(data);
 });
});
layui 中,可以通过使用 form 模块的 select 组件来实现联动下拉框。具体步骤如下: 1. 在 HTML 中定义两个 select 组件,分别为父级和子级下拉框: ``` <div class="layui-form-item"> <label class="layui-form-label">省份</label> <div class="layui-input-block"> <select name="province" lay-filter="province"> <option value="">请选择省份</option> <option value="北京市">北京市</option> <option value="上海市">上海市</option> <option value="广东省">广东省</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">城市</label> <div class="layui-input-block"> <select name="city" lay-filter="city"> <option value="">请选择城市</option> </select> </div> </div> ``` 2. 在 JavaScript 中使用 form.on 监听 select 的 change 事件,在父级下拉框选中值发生变化时,发送请求获取对应的子级数据,并将其渲染到子级下拉框中: ``` layui.use(['form', 'jquery'], function() { var form = layui.form; var $ = layui.jquery; // 监听省份下拉框的变化 form.on('select(province)', function(data) { // 发送请求获取对应的城市数据 $.ajax({ url: '/getCity', type: 'POST', data: {province: data.value}, success: function(data) { // 渲染城市数据到城市下拉框中 var options = '<option value="">请选择城市</option>'; for (var i = 0; i < data.length; i++) { options += '<option value="' + data[i] + '">' + data[i] + '</option>'; } $('select[name="city"]').html(options); form.render('select'); // 重新渲染select组件,让动态生成的option生效 } }); }); }); ``` 3. 在后端实现获取子级数据的接口,这里使用了 Node.js 和 Express 框架: ``` var express = require('express'); var app = express(); app.use(express.static('public')); app.post('/getCity', function(req, res) { var province = req.body.province; var cities = []; // 根据省份获取对应的城市数据 if (province === '北京市') { cities = ['东城区', '西城区', '朝阳区', '海淀区']; } else if (province === '上海市') { cities = ['黄浦区', '徐汇区', '长宁区', '静安区']; } else if (province === '广东省') { cities = ['广州市', '深圳市', '珠海市', '汕头市']; } res.send(cities); }); app.listen(3000, function() { console.log('Server is running at http://localhost:3000'); }); ``` 注意:这里的省份和城市数据是手动定义的,实际应用中可能需要从数据库或其他数据源中获取。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值