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

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

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

从头到尾：

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

那要怎么监听呢？

<select lay-filter="demo">
    <option>......</option>
</select>
 
<script>
	layui.use(['layer', 'jquery', 'form'], function () {
			var layer = layui.layer,
					$ = layui.jquery,
					form = layui.form;
 
			form.on('select(demo)', function(data){
				//这里做自己想做的事情
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
                //最后再渲柒一次
                form.render('select');//select是固定写法 不是选择器
			});
		});
</script>

但是……

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

那现在怎么办呢？

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

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;
 
  //……
});