美文网首页
【layui】修复 multiSelect 多选插件选值后直接点

【layui】修复 multiSelect 多选插件选值后直接点

作者: 睡神疯子 | 来源:发表于2021-11-18 18:43 被阅读0次

在使用 layui 推荐的扩展组件 multiSelect 的过程,发现的问题,在下拉选好值后点下拉框以外的地方会只显示一个值而不是显示所有选中的值。

主要修改代码如下图:


主要修改代码

全部代码,怎么插入 layui 和原来的 multiSelect 组件一样,不了解看可以到官网看,官网没了,自己找镜像网看吧,或者百度。

/*
* 模块地址:https://fly.layui.com/extend/multiSelect/
*/

layui.define("form", function(exports) {
    var MOD_NAME = "multiSelect",
        o = layui.jquery,
        form = layui.form,
        selected_vals = [],
        multiSelect = function() {};
    
    var vals = '';// 储存多选选中的值
    var $input = null;// 存储 多选框显示的 input JQ 对象

    multiSelect.prototype.init = function() {
        var ts = this;
        o('select[multiple]').each(function(idx, item) {
            var t = o(this),
                selds = [];
            t.find('option:selected').each(function() {
                selds.push(o(this).val());
            })
            t.next().addClass('multi').find('.layui-select-title').click(function() {
                selected_vals[idx] && o(this).find('input').val(selected_vals[idx].join(','));
            }).next().find('dd').each(function() {
                var dt = o(this),
                    checked = (dt.hasClass('layui-this') || o.inArray(dt.attr('lay-value'), selds) > -1) ? 'checked' : '',
                    title = dt.text(),
                    disabled = dt.attr('lay-value') === '' ? 'disabled' : '';
                dt.html('<input type="checkbox" lay-skin="primary" title="' + title + '" ' + checked + ' ' + disabled + '>');
                ts.selected(idx, t, dt);
            }).click(function(e) {
                var dt = o(this);
                // 点击下拉框每一行触发选中和反选
                if(e.target.localName == 'dd' && dt.attr('lay-value') !== '') {
                    var status = dt.find('.layui-form-checkbox').toggleClass('layui-form-checked').hasClass('layui-form-checked');
                    dt.find('input').prop('checked', status);
                }
                // 禁止下拉框收回
                dt.parents('.layui-form-select').addClass('layui-form-selected');
                ts.selected(idx, t, dt);
            });
        })
        form.render('checkbox');
    }

    multiSelect.prototype.selected = function(idx, t, dt) {
        // 选中值存入数组
        selected_vals[idx] = [];
        // 先清除真实下拉款选中的值,在下面循环中重新赋值选中
        t.find('option').prop('selected', false);
        dt.parents('dl').find('[type=checkbox]:checked').each(function() {
            var val = o(this).parent().attr('lay-value');
            t.find('option[value=' + val + ']').prop('selected', true);
            selected_vals[idx].push(o(this).attr('title'));
        })
        // 显示已选信息
        vals = selected_vals[idx].join(',');
        $input = dt.parents('dl').prev().find('input');
        $input.val(vals);
    }

    multiSelect.prototype.render = function(type, filter) {
        form.render(type, filter);
        this.init();
    }

    document.addEventListener('click', function(e) {
        if ($input && vals) $input.val(vals);
    });

    var i = new multiSelect();
    i.init();

    exports(MOD_NAME, i);
});

还有个问题,就是用 form.val() 取值的时候多选也会失效,暂时没时间解决,只是在每个form.val() 取值都加了个 multiSelect.render()

相关文章

网友评论

      本文标题:【layui】修复 multiSelect 多选插件选值后直接点

      本文链接:https://www.haomeiwen.com/subject/wuhjtrtx.html