select2下拉插件

下拉單選：

1、行內

1）初始化數據：

<select class="form-control select5">
　　<option selected>張三1/18800188009</option>
　　<option>張三2/18800188009</option>
　　<option>張三3/18800188009</option>
</select>

2）添加並設置選中值：

$(".select5").find("option").removeAttr("selected");
$(".select5").append("<option selected>張三4/18800188009</option>");

3）獲取選中值：

$('.select5').on("change",function(){
　　console.log($(this).select2('val'));
});

2、非行內

1）初始化數據：

var data = [ { id: 0, text: '張三/18800188009' }, { id: 1, text: '李四2/18800188009' }, { id: 2, text: '李四3/13588135888' }];

$(".select5").select2({
　　data: data,
　　placeholder: "請選擇上課教練（可選擇多位）"
});

2）添加並設置選中值：

 $(".select5").select2('val', '0'); //0指的是上面的id,此處需為字符串類型，若為數字toString()轉換

3）獲取選中值：

$('.select5').on("change",function(){
　　console.log(data[$(this).select2('val')].text);
});

下拉多選：

 

1、行內

1）初始化數據：

<select class="form-control select5" multiple="multiple">
　　<option selected>張三1/18800188009</option>
　　<option>張三2/18800188009</option>
　　<option>張三3/18800188009</option>
</select>

2）添加並設置選中值：

$(".select5").find("option").removeAttr("selected");
$(".select5").append("<option selected>張三4/18800188009</option><option selected>張三4/18800188009</option>");

3）獲取選中值：

$('.select5').on("change",function(){
　　console.log($(this).select2('val'));
});

　對於多選獲取的值格式：

2、非行內

1）初始化數據：

var data = [ { id: 0, text: '張三/18800188009' }, { id: 1, text: '李四2/18800188009' }, { id: 2, text: '李四3/13588135888' }];

$(".select5").select2({
　　data: data,
　　placeholder: "請選擇上課教練（可選擇多位）",

　　multiple:'multiple'
});

2）添加並設置選中值：

$(".select6").val(['0','1','2']);//0，1，2指的是上面的id,此處需為字符串類型，若為數字toString()轉換

3）獲取選中值：

$('.select5').on("change",function(){

　　for(var i=0;i<$(this).select2('val').length;i++){
　　　　console.log(data[$(this).select2('val')[i]].text);
　　}

});

 =>select2('val')的值

 

 下拉常用配置：

 

$(".selectD").select2({

　　width: "100%",

　　theme: "classic",// 舊版樣式

　　placeholder:'adsada',

　　containerCssClass:'test', //Css類將被添加到select2容器的標簽

　　dropdownCssClass:'xxxx', //Css類將被添加到select2下拉的容器

　　minimumResultsForSearch: Infinity,//隱藏篩選框

　　allowClear: true,//顯示右上角帶X，可清除所有選項

})