Layui为select绑定change事件/Layui中select绑定change事件不生效

最新推荐文章于 2025-09-11 02:13:12 发布

原创最新推荐文章于 2025-09-11 02:13:12 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #form.on #layui绑定change事件

前端框架专栏收录该内容

6 篇文章

订阅专栏

1、问题概述？

在使用jQuery的时候，我们可以通过如下方式为select下拉框绑定change事件，但是在layui中不生效。

所以经常有人发问：Layui中为select绑定change事件不生效。

$(function(){
  //通过id为select绑定change事件
  $("#selectId").bind("change",function(){

   });
});

因为Layui框架重写了这个功能，需要使用Layui的方式绑定change事件。

2、Layui为select绑定change事件方式如下

2.1、前端页面使用方式

注意点：需要使用到属性lay-filter="assetsystem"，名字自定义

<div class="layui-form-item">
    <div class="layui-inline">
         <label class="layui-form-label">下拉框</label>
         <div class="layui-input-inline">
             <select lay-filter="assetsystem" name="assetsystem" id="assetsystem">
             </select>
          </div>
     </div>
</div>

2.2、为select绑定change事件

重点1：通过form.on为select绑定change事件

重点2：通过form.on中的data.value可以获取下拉框选中的值。

<script>
    layui.use(['layer','element','form','util','table','laydate'],function(){
      var element = layui.element;
      var table = layui.table;
      var form = layui.form;
      var util = layui.util;
      var $ = layui.$;

      //绑定规则使用到lay-filter
      form.on('select(assetsystem)', function(data){
        //data.value获取下拉框选中的值
        //也可以在change事件中使用异步请求等操作相关数据
        //如实现二级联动等。
        /*$.ajax({
            type: "get",
            url: "/path/youpath",
            cache: false,
            data:{"projectalias":data.value},
            dataType: "text",
            success:function(msg){
               
                form.render();
            }
        });*/
    });

    });
</script>