整理一下Select2知识点。
Select2绑定数据源有几种方式,第一种是本地数据源绑定
<script type="text/javascript">
//one 本地数据方式
var dataList = [
{ id: 0, text: 'ljiong.com(老囧博客)' },
{ id: 1, text: 'Ants(蚂蚁)' },
{ id: 2, text: 'can you speak javascript(你能讲JavaScript嘛)' },
{ id: 3, text: 'vae(许嵩)' },
{ id: 4, text: 'Badminton(羽毛球)' }
];
$(".downList1").select2({
data: dataList,
placeholder:'请选择',//默认文字提示
language: "zh-CN",//汉化
allowClear: true//允许清空
})
第二种是 动态绑定数据源(通过ajax)
//two AJAX获取数据方式(请求一次)
var oneReq = [];
$.ajax({
type:"post",
url:"URL",
dataType:"json",
contentType:"application/json",
success:function(data){
oneReq = data;
},
error:function(data){
}
});
$(".downList2").select2({
data: oneReq,
placeholder:'请选择',//默认文字提示
language: "zh-CN",//汉化
allowClear: true//允许清空
})
//two AJAX获取数据方式(每次请求)
$(".downList2").select2({
ajax: {
type:'GET',
url: "url",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term 请求参数 , 请求框中输入的参数
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
/*var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候,可以使用类似此方法创建新的数组对象
var arr = data.result.list
for(item in arr){
itemList.push({id: item, text: arr[item]})
}*/
return {
results: data.items,//itemList
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
placeholder:'请选择',//默认文字提示
language: "zh-CN",
tags: true,//允许手动添加
allowClear: true,//允许清空
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
minimumInputLength: 1,//最少输入多少个字符后开始查询
formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
});
</script>
注意, select2的数据源必须是{id:xxx,text:xxx}的格式,可以在服务器端转换也可以直接在js里转
如果使用ajax方式动态绑定数据,一定要把对应的标签改为div,select标签是不行的。
获取选中值的方式可以直接$("#id").var();也可以$("#id").select2("val");