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

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

官方文档地址: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/

如果链接打不开请翻墙。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页