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

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>
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
layui 的 xm-select 组件提供了多种绑定 change 事件的方式,具体可以根据实际情况选择。 1. 使用 on('change') 方法 使用 `on('change')` 方法可以直接绑定 change 事件,示例代码如下: ```javascript layui.use('xmSelect', function(){ var xmSelect = layui.xmSelect; var demoXmSelect = xmSelect.render({ el: '#demo', data: [{ name: '选项一', value: '1' }, { name: '选项二', value: '2' }], on: function(data){ console.log(data.arr); } }); }); ``` 在上面的例子,我们在 `on` 配置项监听了 `change` 事件,并在事件处理函数打印了选择的值的数组。 2. 使用 change 函数 使用 `change` 函数可以动态绑定或解绑 change 事件,示例代码如下: ```javascript layui.use('xmSelect', function(){ var xmSelect = layui.xmSelect; var demoXmSelect = xmSelect.render({ el: '#demo', data: [{ name: '选项一', value: '1' }, { name: '选项二', value: '2' }] }); demoXmSelect.change(function(data){ console.log(data.arr); }); }); ``` 在上面的例子,我们使用 `change` 函数绑定了 `change` 事件,并在事件处理函数打印了选择的值的数组。 3. 使用 form.on('select') 函数 使用 `form.on('select')` 函数可以直接在 layuiform 模块绑定 `select` 组件的 `change` 事件,示例代码如下: ```javascript layui.use(['form', 'xmSelect'], function(){ var form = layui.form; var xmSelect = layui.xmSelect; var demoXmSelect = xmSelect.render({ el: '#demo', data: [{ name: '选项一', value: '1' }, { name: '选项二', value: '2' }] }); form.on('select(demo)', function(data){ console.log(data.value); }); }); ``` 在上面的例子,我们使用 `form.on('select')` 函数绑定了 id 为 demo 的 select 组件的 `change` 事件,并在事件处理函数打印了选择的值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雾林小妖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值