【技术】Excel表格里写三级联动下拉框无空格版

如图所示,先把数据复制到表格中(数据见附件)

https://pan.baidu.com/s/1lNKdj5_azt_6l6OY9RMciQ

2: Excel中执行:“插入”---->"名称"----->"定义"  (我没用过,我这里用的是ctrl+f3)

会出现上图所示,然后点击左上角的“新建”

在“名称”的位置填写“省”(这里以省、市、县作为例子,若有其他联动需求应自行领会)

在“引用位置这里填写 “省市”页签里所有的值的坐标

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
layui是一款简洁易用的前端UI框架,在layui中提供了三级联动下拉框的组件。三级联动下拉框即将三个下拉框进行联动,第一个下拉框选择一个项后,第二个下拉框根据第一个下拉框的选项动态展示相应的选项,第三个下拉框同理。 使用layui的三级联动下拉框非常简单,在HTML中,我们需要定义三个select元素,以及它们各自的id和class属性,如下所示: ```html <select name="province" id="province" lay-filter="province"> <option value="">请选择省份</option> <!-- 省份选项 --> </select> <select name="city" id="city" lay-filter="city" disabled> <option value="">请选择城市</option> <!-- 城市选项 --> </select> <select name="area" id="area" lay-filter="area" disabled> <option value="">请选择县/区</option> <!-- 县/区选项 --> </select> ``` 在JavaScript中,我们需要引用layui和对应的模块,如form模块和jquery库。接着,我们可以通过layui的form.on(事件, 回调函数)方法监听每个下拉框的change事件,并在回调函数中编对应的联动代码,如下所示: ```javascript layui.use(['jquery', 'form'], function(){ var $ = layui.jquery, form = layui.form; //监听省份下拉框的change事件 form.on('select(province)', function(data){ //动态获取城市数据 //省份value值 var value = data.value; //发送ajax请求,获取对应的城市数据 $.get('url', {provinceId: value}, function(res){ //将城市选项插入到城市下拉框中 var options = '<option value="">请选择城市</option>'; for(var i=0; i<res.length; i++){ options += '<option value="'+res[i].id+'">'+res[i].name+'</option>'; } $('#city').html(options); //更新渲染 form.render(); //启用城市下拉框 $('#city').prop('disabled', false); }); //清空县/区下拉框 $('#area').html('<option value="">请选择县/区</option>'); //禁用县/区下拉框 $('#area').prop('disabled', true); }); //监听城市下拉框的change事件 form.on('select(city)', function(data){ //动态获取县/区数据 //城市value值 var value = data.value; //发送ajax请求,获取对应的县/区数据 $.get('url', {cityId: value}, function(res){ //将县/区选项插入到县/区下拉框中 var options = '<option value="">请选择县/区</option>'; for(var i=0; i<res.length; i++){ options += '<option value="'+res[i].id+'">'+res[i].name+'</option>'; } $('#area').html(options); //更新渲染 form.render(); //启用县/区下拉框 $('#area').prop('disabled', false); }); }); }); ``` 这样,就实现了一个简单的三级联动下拉框。需要注意的是,动态获取数据的方式可能因项目而异,此处仅提供一个简单的示例。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值