layui 中解决select onchange事件无效

最新推荐文章于 2024-06-24 05:30:00 发布

杭杭爸爸

最新推荐文章于 2024-06-24 05:30:00 发布

阅读量5.2k

点赞数 8

分类专栏： JavaScript WEB开发文章标签： layui javascript

本文链接：https://blog.csdn.net/lk419121010221/article/details/125057966

版权

WEB开发同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

本文介绍如何在layui中使用lay-filter属性替代传统onchange事件，以解决改造后的select组件 onchange失效问题，并展示了如何通过lay-filter属性获取选中值和DOM操作的示例。

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

layui将select改造了，所以直接写onchange无效，代之可以使用 lay-filter 属性

<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
    <div class="layui-form-item ">
        <label class="layui-form-label">发票类型</label>
        <div class="layui-input-block ">
            <select id="fapiaolx" lay-verify="" lay-filter="selctOnchange"
                    name="fapiaolx">
                <option value="1">增值税专票</option>
                <option value="2">增值税普票</option>
            </select>
        </div>
    </div>
</div>

layui.use(['jquery', 'form'], function() {
  var form = layui.form;
  var $ =layui.jquery;
 
 
  form.on('select(selctOnchange)', function (data) {
    console.log(data.elem); //得到select原始DOM对象
    console.log(data.elem.id); //得到select id 属性
    console.log(data.elem.name); //得到select name 属性
    console.log(data.value); //得到被选中的值
    console.log(data.othis); //得到美化后的DOM对象
  });
}