<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>select2</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- select2 style -->
<link rel="stylesheet" href="select2.min.css">
</head>
<body class="hold-transition skin-blue sidebar-mini" style="background-color:#ecf0f5;">
<!-- Main content -->
<section class="content container" style="margin-top: 15px;">
<div class="col-sm-4">
<h3>本地数据方式</h3>
<select class="form-control input-sm downList1">
<option></option>
</select>
<p class="p1"></p>
<hr>
<button type="button" class="btn btn-sm btn-primary" id="one">click</button>
</div>
<div class="col-sm-4">
<h3>AJAX获取数据方式</h3>
<select class="form-control input-sm downList2">
<option></option>
</select>
<p class="p2"></p>
<hr>
<button type="button" class="btn btn-sm btn-primary" id="two">click</button>
</div>
</section><!-- /.content -->
<script src="jquery/jQuery-2.1.4.min.js"></script>
<script src="select2.full.min.js"></script>
<script src="i18n/zh-CN.js"></script>
</body>
<script>
//one 本地数据方式
var dataList = [
{ id: 0, text: 'enhancement' },
{ id: 1, text: 'bug' },
{ id: 2, text: 'duplicate' },
{ id: 3, text: 'invalid' },
{ id: 4, text: 'wontfix' }
];
$(".downList1").select2({
data: dataList,
placeholder:'请选择',//默认文字提示
language: "zh-CN",
allowClear: true//允许清空
})
$('#one').click(function(){
var id = $(".downList1").select2("data")[0].id;
var text = $(".downList1").select2("data")[0].text;
var html = '您选择了：' + '{ id:' + id + ', ' + 'text: ' + text + ' }';
$('.p1').text(html);
})
//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 = [];
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;} // 函数用于呈现当前的选择
});
$('#two').click(function(){
var id = $(".downList2").select2("data")[0].id;
var text = $(".downList2").select2("data")[0].text;
var html = '您选择了：' + '{ id:' + id + ', ' + 'text: ' + text + ' }';
$('.p2').text(html);
})
</script>
</html>
bootstrap select2插件使用demo
需积分: 50 107 浏览量
2019-01-25
11:22:30
上传
评论 1
收藏 376KB RAR 举报
select2.rar （60个子文件） 
select2 bootstrap css 
bootstrap.css.map 381KB bootstrap.min.css 120KB bootstrap.css 144KB fonts glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.woff2 18KB glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 106KB js npm.js 484B bootstrap.min.js 35KB bootstrap.js 66KB jquery jQuery-2.1.4.min.js 82KB select2.min.css 15KB select2.full.min.js 70KB i18n mk.js 979B uk.js 1KB nl.js 867B ca.js 876B fa.js 1004B es.js 871B da.js 816B tr.js 720B gl.js 800B de.js 775B bg.js 906B hu.js 727B fi.js 703B th.js 948B en.js 827B it.js 876B sk.js 1KB lt.js 878B ro.js 834B lv.js 872B pt.js 859B hi.js 1KB fr.js 823B zh-TW.js 708B zh-CN.js 769B hr.js 780B ko.js 854B az.js 701B ru.js 1KB eu.js 844B sv.js 786B sr.js 880B id.js 693B vi.js 801B pl.js 926B et.js 775B pt-BR.js 853B nb.js 723B is.js 773B he.js 894B cs.js 1KB select2.full.js 149KB select2.css 17KB select2.min.js 61KB
select2.html 4KB select2.js 129KB资源评论
