SELECT2使用

这个帖子记录使用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
	}
})