<h3>本地數據方式</h3>
<select class="form-control input-sm downList1">
<option></option>
</select>
<h3>AJAX獲取數據方式</h3>
<select class="form-control input-sm downList2">
<option></option>
</select>
代碼
本地數據方式:
html的select中的option是可選的,如果不寫一個空的option標簽,則默認選擇第一項;如果寫了option標簽,則默認為空,但調用的時候,最好設置placeholder屬性,為了美觀;AJAX獲取數據方式:
html的select中的option是必選的
javascript
<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//允許清空
})
//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>