如何保留select里面的change事件又采用layui的美化

讨论 已结 精帖
14 3230
岁月小偷
悬赏:50飞吻
如题,很多小伙伴遇到美化了之后里面的change事件不触发了这个问题,以前的建议就是既然使用layui的组件,就充分利用他,他对应的也提供了表单的select事件,但是如果这些节点以前就存在了后来用了layui岂不是都要去把对应的事件搬过来。有没有一个什么方式既可以用美化,又保留事件的,这个答案是肯定的,而且可能方式有很多种,这里提供一种我觉得算是最简洁方便的改法提供参考。
上效果图

可能看图看不出啥玩意,看关键代码吧,图里面的弹出信息实际上是绑定在select的事件弹出来的



关键的处理

对!你没看错,就是这么简单的一个事件监听里面写了一句代码就能支持。至于为啥,这个需要看看我以前发的另外一个帖子了,关于layui的event和onevent的。 http://fly.layui.com/jie/27143/
举一反三,其他的被美化的组件也可以用同样的处理方式在项目中的主要位置一句话搞定。
然后如果有小伙伴发现改了之后没有加lay-filter的节点选择之后会触发两次原来绑定的事件,这个也请移步到我刚才提到的那个帖子里面有介绍,这个应该是layui本身存在的一个bug。我的最新修改如下。

被注释的两行是原来的代码,换成下面的一行,修改了对会不会有不良影响?这个可以放心,不会有任何不良的影响。
回帖
  • 好多实用分享啊,୧(๑•̀◡•́๑)૭[色]
    0 回复
  • 大佬效率[亲亲]
    0 回复
  • 0 回复
  • 0 回复
  • 楼主的功夫、敬业和分享精神,值得传颂!
    0 回复
  • @dududu 谢谢褒奖[微笑] ,共勉前行
    0 回复
  • 妮妮123
    2018-8-30
    楼主,看了你的这个文章,问个问题。如何点击select触发事件,而不是点击option才会触发 ,通过点击select处理一部分逻辑,动态加载option等等, 不知道这样的功能 如何实现呢 我尝试在select标签上加了class,通过class触发,但是发现没有效果
    0 回复
  • @妮妮123 嗯嗯,这个处理方式还是有的,就是可能有点绕,用我这个帖子的方法是搞不定的,因为需求不一样,我的理解是你的select一开始里面内容可能是空的或者需要依赖其他的组件的数据在点击的时候要动态的加载出新的option的数据渲染出新的option,是这个逻辑对吧?因为目前layui提供的select事件实际上是点击里面的option才会触发的,所以是不合适的,你要的事件应该是点击这个下拉框就要触发,得到数据,所以原来的事件就走不通了。我的思路是可以用事件委托的方式大概的逻辑代码如下:
    html
    <select name="test"></select>
    js部分
    // 先用事件委托监听layui生成出来的select组件的点击监听
    $(document).on('click', 'select[name="test"]+', function(){
    // 被点击的
    var elem = $(this);
    // 原始的select节点
    var selectElem = elem.prev();
    if (!selectElem.data('status') {
    // status是自定义的一个状态,比如一开始是空的,说明需要加载,如果加载过了就设置成true避免重复加载。
    // 发ajax之前最好能有一个提示信息说正在加载
    $.ajax({
    ....,
    success: function(res){
    // 修改selectElem的状态为已完成,避免重复加载
    selectElem.data('status', true);
    // 根据数据得出option的html
    selectElem.html(optionHtml);
    // 更新渲染
    form.render('select');
    // 更新的时候我记得会把打开option给关掉,所以我估计需要在后面再次触发一次点击让它显示出option
    elem.find('.layui-select-title').click();
    }
    });
    }
    })
    0 回复
  • 妮妮123
    2018-8-30
    @岁月小偷 感谢楼主,我看到点击的位置是input,所以一直没有想到用事件委托,非常感谢[嘻嘻] ,再问一个问题,还是select的,select的树状结构,如何赋值,如下图,页面初始化的时候,数据是产品部----1,运营部---2,如何赋值显示为如图效果,尝试通过 formSelects.value('department',[1,2]); 该种方式没作用,还麻烦楼主帮忙看一下,万分感谢
    0 回复
  • 这个关键要看你里面是怎么实现的哈,树形的还有得看看运来的value的逻辑,比如有一种情况就是你里面是树形的,但是原来的value他只处理单层结构的,这个得具体看代码实现的逻辑才能确定额。
    0 回复
  • 妮妮123
    2018-8-30
    @岁月小偷 我可能刚刚没有描述清楚 情况是这样的,页面基本数据其实是有的(树形结构已经有了), 就是比如选中的了产品部和运营部提交数据后,下次进入页面,页面初始化的时候,数据是一部分,另一部分是产品部和运营部被选中并显示到文本框中的问题,我的问题是,如何让产品部和运营部被选中并显示
    0 回复
  • 言念
    2018-9-19
    多谢分享,对我解决其他问题的思路有帮助.
    0 回复
  • @玉宇 不客气[微笑] 有帮助就好[嘻嘻]
    0 回复
  • lge
    2019-1-11
    大佬,帮我看一下我的问题呗
    0 回复