使用layui框架时select监听的那些坑:无法监听change事件

坑1:使用layui框架,select无法再正常使用change监听下拉选择事件

坑2:使用layui框架自身监听,无论select是否两次选择的同一值,也就是无论select的值有没有变化,都会触发监听事件。

从头到尾:

layui框架对select表单代码又进行了二次渲柒,所以无法使用普通的监听。

使用layui框架时select监听的那些坑:无法监听change事件_第1张图片

那要怎么监听呢?


 

但是……

按照我之前的理解,监听下拉框值得变化,就是只有下拉框的值发生了改变,才会触发这个事件,否则就不触发。但是这个方法是,只要你鼠标点击了下拉选项里面的值,不论这个值跟之前的值是否相等,都会触发这个事件。

那现在怎么办呢?

先在页面中加一个隐藏域,里面想办法存入上次的值。然后再次下拉选择的话,就也这个隐藏域中的值进行对比

form.on('select(lujing)', function(data){
    if(data.value != $("input[name='oldvalue']").val()){
      //这里做你想做的操作
      form.render('select');
    }else{
      return false;
    }
});

小贴士:在layui表单监听里面怎么用$("#id")来获取DOM?有时候获取不到的。

//第一种:主动加载jquery模块
layui.use(['jquery', 'layer'], function(){ 
  var $ = layui.$ //重点处
  ,layer = layui.layer;
  
  //后面就跟你平时使用jQuery一样
  $('body').append('hello jquery');
});
 
//第二种:如果内置的模块本身是依赖jquery,你无需去use jquery,所以上面的写法其实可以是:
layui.use('layer', function(){ 
  var $ = layui.$ //由于layer弹层依赖jQuery,所以可以直接得到
  ,layer = layui.layer;
 
  //……
});

 

你可能感兴趣的:(web前端,layui,select监听,change事件)