SELECT2使用

最新推荐文章于 2025-05-28 16:32:12 发布

忽胖忽瘦

最新推荐文章于 2025-05-28 16:32:12 发布

阅读量649

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： select2 select2错位 select2动态加载数据 select2事件绑定

本文链接：https://blog.youkuaiyun.com/flyBird3211/article/details/88824270

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍使用 Select2 插件过程中常见的问题及解决方案，包括位置错位修正、通过 JavaScript 设置值的方法、数据格式要求、点击加载数据的配置以及事件监听的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个帖子记录使用select2时碰见的问题
官方文档：https://select2.org/

select2位置错位

当有滚动条时，select2出现的下拉框出现错位问题。是因为添加的span标签的position: 'absolute’这个样式导致的问题。修改selects的js源码，将absolute修改为fixed即可解决

通过js设置select2的值

$("#id").val("xxxx").trigger("change");

select2数据格式

[
    {
      "id": 1,
      "text": "Option 1"
    },
    {
      "id": 2,
      "text": "Option 2"
    }
]

select2点击时加载数据

$("#xxxx").select2({
	language:"es", 	//设置语言
	ajax:{
         url:"url",
         contentType: "application/json;charset=utf-8",
         dataType: 'json',
         method: 'post',
         data: function (params) {	//动态获取参数，便于级联等操作
             var word = params.term;	//可以获取下拉框中输入的关键字
             var data = {
                 "data":xxxx,
                  "keyword":word==undefined?"":word
              };
              return JSON.stringify(data);
          },
         processResults: function (data, params) {		//用于处理返回的数据
            return {
                results: data,
            };
        }
})

select2事件

官网地址：https://select2.org/programmatic-control/events

//当选中之后触发
$("#xxxx").on("select2:select",function(e){
	//获取传递过来的参数
	var data = e.params.data
	//代码逻辑
})

手动调用select2的监听事件

data={
	id:"1",
	name:"name"
}
$("#id").trigger({
	type:"select2:select",
	params:{
		data:data
	}
})