解决select2默认赋值问题

Select2组件配置与使用

最新推荐文章于 2025-10-08 00:54:10 发布

原创最新推荐文章于 2025-10-08 00:54:10 发布 · 1.4w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#select2

JQuery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用Select2组件从静态数据源加载数据及通过AJAX请求动态获取数据的方法。详细展示了两种方式下的参数配置及选项显示效果。

1、数据来源于静态数据

$(".test").select2({
            width: "100%",
            minimumResultsForSearch: -1,
            data:[{id:1,name:1},{id:2,name:2},
                  {id:3,name:3},{id:4,name:4},
                  {id:5,name:5}],
            formatSelection: function(item){
                return item.name;
            },
            formatResult: function(item){
                return item.name;
            }
        });
赋值
    $(".test").val(1).trigger("change");

2、数据来源ajax请求

$(".test").select2({
            width: "100%",
            multiple: false,
            placeholder: "请选择...",
            ajax: {
                url: "url",
                type: "post",
                dataType: "json",
                data:function(term, page){
                    return {
                        start: (page - 1) * 10,
                        length: 10
                    };
                },
                 results:function(response, page, query){ 
                 }
            },
            formatResult: this.proxy(function(item){
                return item.name;
            }),
            formatSelection: this.proxy(function(item){
                return item.name;
            }),
            id: this.proxy(function(item){
                return item.value;
            })
        })

//赋值
    $(".test").select2("data",{id:'',name:''})