一个关于Select的巨坑

最近在做开发，有一个需求需要给人排班，具体实现是多个Select,有一个可以选择全部的功能，

image.png

为了排错我已经把Layui更新下面列表的操作展示取消了。

更改下面列表的代码如下

//清除标签，然后在加选中
function allSelect(value) {

    // $("#form .layui-form-select").remove();
    $(".eachSelect option").attr("selected",false);

    //方法一 
    $(".eachSelect option[value='"+value+"']").attr("selected",true);

    //方法二
    // $(".eachSelect option").each(function (ele) {
    //     $(this).attr("selected",false);
    //     var val = $(this).attr("value");
    //     if(val ==  value){
    //         $(this).attr("selected",true);
    //     }
    // });


    // layui.use('form', function () {
    //     var layForm = layui.form;
    //     layForm.render("select","form");
    // });

}

image.png

事实如此，方法的确没写错，可是多尝试几次，就会出现选中值改了，但是页面并没有渲染的情况，
同样的，使用 $('#form').serializeArray();方法的值也不会根据select标签变化。

image.png

image.png

image.png

image.png

image.png

初步估计，是由于一次渲染太多，重复渲染导致浏览器失败和内存更新失败，当你使用页面尝试的时候，是能正常获取值的。

image.png

解决方法，由于这里使用的是Layui，本来现在设置SELECT重新渲染，但是这样多个SELECT渲染会失败，
那么可以采用Layui赋值的方式去做。

function allSelect(value) {

    var data = {};
    

    $(".eachSelect").each(function(){
        var name = $(this).attr("name");
        data[name] = value;
    });

    layui.use('form', function () {
        var layForm = layui.form;
        layForm.val("form",data);
    });

}

image.png

测试过后没有问题

image.png

image.png