layui select怎么获取自定义属性

3 篇文章 0 订阅

 

<select name="province"  sel-data="34"  lay-filter="province">

<option value="">请选择省</option>

<option value="北京" data="1">北京</option>

<option value="上海" data="2">上海</option>

<option value="广州" data="3">广州</option>

<option value="深圳" data="4">深圳</option>

</select>
 

分两种

一种获取select 自定义属性

 
form.on('select(province)', function(data){
    data.elem.getAttribute('sel-data');

  })

一种获取option自定义属性

form.on('select(province)', function(data){
    var pid = data.elem[data.elem.selectedIndex].getAttribute('data');

  })

如果你使用的是 layuiselect 组件,可以通过给 select 组件添加 lay-filter 属性,并在 JavaScript 中使用 form.on('select(过滤器)', function(data){}) 监听 select 的选择事件,然后在回调函数中使用 layui 的 layer 模块的 open 方法打开一个自定义的弹窗,用来展示选择的选项。在弹窗中可以使用滑动插件(如 swiper.js)来实现滑动效果。具体实现可以参考以下示例代码: HTML 代码: ```html <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">选择项</label> <div class="layui-input-block"> <select name="select" lay-filter="select"> <option value=""></option> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </div> </div> </form> ``` JavaScript 代码: ```javascript layui.use(['form', 'layer'], function(){ var form = layui.form; var layer = layui.layer; form.on('select(select)', function(data){ var option = data.value; // 打开自定义弹窗 layer.open({ type: 1, title: '选择结果', content: '<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">选项' + option + '</div><div class="swiper-slide">选项' + (parseInt(option) + 1) + '</div><div class="swiper-slide">选项' + (parseInt(option) + 2) + '</div></div><div class="swiper-pagination"></div></div>', area: ['80%', '80%'], success: function(layero, index){ // 初始化滑动插件 var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }, }); } }); }); }); ``` 在这个例子中,我们监听了 select 的选择事件,并在回调函数中打开了一个自定义的弹窗,弹窗中使用了 swiper.js 插件来实现滑动效果。你可以根据自己的需求来实现不同的滑动效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值