select2使用方法

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);
           

待續