天天看点

select2使用方法htmljs

select2

  • html
  • js

html

js

ajax的方式加载选项。注意和data方式加载不一样,ajax加载时点击之后才会发送请求,加载选项。因此回显选项的时候无法通过val()的方式回显,需要重新构造初始选项并选中。

//清空选项
$(".js-edit").empty();

//通过ajax请求选项
$(".js-edit").select2({
	//单选
	multiple:false,
	placeholder:"请选择...",
	width:"100%",
	ajax:{
		url:"xxxx.json",
		dataType:"json",
		//请求的参数
		data:function(params){
			return {};
			},
		//处理请求结果,重新封装数据
		processResults:function(data,params){
			for(var i=0;i<data.length;i++){
				//选项必传的两个字段id和text,id就是value,text就是显示的文本。所以必须重新封装数据。
				data[i].id=data[i].id;
				data[i].text=data[i].label;
			}
			//必须返回这样的格式
			return {
				results:data
			};
		},
		//去除搜索框
		minimumResultsForSearch:-1
	}
});

//ajax回显选项
var id=1;
var text="选项1";
var option=new Option(text,id,true,true)
$(".js-edit").append(option).trigger("change");
$(".js-edit").prop("disable",true);
           

待续