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

最新推荐文章于 2021-08-05 18:50:57 发布

衣襟晚照

最新推荐文章于 2021-08-05 18:50:57 发布

阅读量4.1k

点赞数 1

分类专栏： web前端文章标签： select2 ajax 初始化 select2 selected select2赋值

web前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍在使用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 
来源：优快云 
原文：https://blog.youkuaiyun.com/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/

如果链接打不开请翻墙。