select2 修改页面初始化值(ajax)

柔情只为你懂 2022-05-08 16:56 334阅读 0赞

select2 是一款JQuery 下拉列表插件，可实现多选、分组、搜索功能。

官方文档地址：[https://select2.org/][https_select2.org]

这里记录一个在传统web后台管理项目中，使用select2 组件在修改页面中如何初始化新增时保存的值。

select2 版本 4.0.6

翻遍了百度找到了以下方案

方案一

var ddd = $("#ddd").select2();    //获取selectid
     
    ddd.val("four").trigger("change");    //设置 value 为four的 option 为选中状态
     
    坑爹啊，就这段简单搞了我这么久一直怀疑是select2 然后 没去搞，唉心酸不多说了，快去奔放你的代码吧！！！嘻嘻 下班
     
    ddd.change();/
    --------------------- 
    作者：JackChenKing 
    来源：CSDN 
    原文：https://blog.csdn.net/u012374381/article/details/72629233?utm_source=copy 
    版权声明：本文为博主原创文章，转载请附上博文链接！

方案二

单选
       $("#select").val("24").select2();
    
    或者多选时使用
       $(".js-example").val(['0','2']).trigger('change')这种方法。
    
    https://www.cnblogs.com/zhansu/p/5817250.html

以上两种方案，我都试了不知道是不是版本不一致的原因。反正不管用～

无赖只好翻墙

在一翻搜索中找到了解决方案。

select2通过ajax赋值时，首先需要渲染到初始化一下原始的select 的option,然后再重新将要在修改时需要显示的值重新以option的方式渲染到之前初始化的select中。

具体代码

//查询数据
        $.ajax({
            type: "POST",
            dataType:'json',
            url:'http://wwww.xxx.xxx/getInfo'
           
            success: function(data){
                if(data.status==200){
       
                   getListData(data.id);//这里去初始化你的下拉列表,也可以在外面初始化
    
                   //将需要选中和显示的值新new一个option
                   var option = new Option(data.name,data.id, true, true);
                   
                   //将option 渲染到select中
                   $("#select2").append(option).trigger('change');
    
                }else{
                    layer.msg(data.message);
                }
    
            }
        });

原文链接：

[https://jsnwork.kiiuo.com/archives/1583/jquery-%E5%A5%BD%E7%94%A8%E7%9A%84%E5%A4%96%E6%8E%9B-select2%E3%80%82%E4%BB%8B%E7%B4%B9ajax%E6%96%B9%E6%B3%95%E3%80%82/][https_jsnwork.kiiuo.com_archives_1583_jquery-_E5_A5_BD_E7_94_A8_E7_9A_84_E5_A4_96_E6_8E_9B-select2_E3_80_82_E4_BB_8B_E7_B4_B9ajax_E6_96_B9_E6_B3_95_E3_80_82]

如果链接打不开请翻墙。

[https_select2.org]: https://select2.org/
[https_jsnwork.kiiuo.com_archives_1583_jquery-_E5_A5_BD_E7_94_A8_E7_9A_84_E5_A4_96_E6_8E_9B-select2_E3_80_82_E4_BB_8B_E7_B4_B9ajax_E6_96_B9_E6_B3_95_E3_80_82]: https://jsnwork.kiiuo.com/archives/1583/jquery-%E5%A5%BD%E7%94%A8%E7%9A%84%E5%A4%96%E6%8E%9B-select2%E3%80%82%E4%BB%8B%E7%B4%B9ajax%E6%96%B9%E6%B3%95%E3%80%82/