select2简单使用（含ajax获取是数据）
2017-11-01 18:39
399 查看
直接上代码（如果引用的js或者css失效的话请更改）：复制保存即可运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>select2 Demo</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"><!--bootstrap样式-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><!--jQuery-->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script><!--bootstrap-->
<script src="https://cdn.bootcss.com/select2/4.0.4/js/select2.js"></script><!--select2-->
<script src="https://cdn.bootcss.com/select2/4.0.4/js/i18n/zh-CN.js"></script><!--select2语言包-->
<link href="https://cdn.bootcss.com/select2/4.0.4/css/select2.css" rel="stylesheet"><!--select2样式-->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"><!--awesome图标库-->
<style>
html,body{
height: 100%;
}
img{
width: 50px;
height: 50px
}
.select2-result-repository__avatar {
float: left;
width: 60px;
margin-right: 10px;
}
.select2-result-repository__meta{
margin-left: 70px;
}
.select2-result-repository__title{
color: black;
font-weight: 700;
word-wrap: break-word;
line-height: 1.1;
margin-bottom: 4px;
}
.select2-result-repository__statistics div{
margin-right: 5px;
display:block;
float: left;
}
</style>
<script>
var data = [
{
"id": 1,
"text": "选项 1（普通选项）"
},
{
"id": 2,
"text": "选项 2（默认选中）",
"selected": true
},
{
"id": 3,
"text": "选项 3（不可选）",
"disabled": true
}
];
$(function(){
var placeholder = "请选择";
$('.select2').select2({
placeholder: placeholder,
language:'zh-CN'
});
$("#json").select2({
data:data,
placeholder: placeholder,
language:'zh-CN'
});
$("#ajaxdata").select2({
ajax: {
url: function(params){return "https://api.github.com/search/repositories"},//动态url,也可以直接写成 url:https://api.github.com/search/repositories
dataType: 'json',
delay: 250,//在多少毫秒内没有输入时则开始请求服务器
data: function (params) {
return {
q: params.term, // 搜索参数
page: params.page
};
},
processResults: function (data, params) {
// 此处解析数据，将数据返回给select2
params.page = params.page || 1;
return {
results: data.items,// data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）
pagination: {
more: (params.page * 30) < data.total_count//滚动到底部时是否自动加载更多
}
};
},
cache: true
},
placeholder: '请输入关键字',
escapeMarkup: function (markup) { return markup; }, // 字符转义处理
minimumInputLength: 1,
templateResult: formatRepo,//返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里，当然你可以return repo.text+"1";等
templateSelection: formatRepoSelection,//选中项回调function formatRepoSelection(repo){return repo.text}
language:'zh-CN'
});
function formatRepo (repo) {//repo对象根据拼接返回结果
if (repo.loading) {
return repo.text;
}
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " 克隆</div>" +
"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " 标星</div>" +
"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " 查看</div>" +
"</div>" +
"</div></div>";
return markup;
}
function formatRepoSelection (repo) {//根据选中的最新返回显示在选择框中的文字
return repo.full_name || repo.text;
}
})
</script>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<section class="panel">
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-1 col-md-1 control-label">json数据源</label>
<div class="col-lg-11 col-md-11">
<select class="form-control select2" id="json"></select>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 col-md-1 control-label">ajax数据源</label>
<div class="col-lg-11 col-md-11">
<select class="form-control select2" id="ajaxdata"></select>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 col-md-1 control-label">单选</label>
<div class="col-lg-11 col-md-11">
<select class="form-control select2">
<option></option>
<optgroup label="移动端">
<option value="1">android</option>
<option value="2">ios</option>
</optgroup>
<optgroup label="web端">
<option value="1">谷歌浏览器</option>
<option value="2">火狐浏览器</option>
<option value="3">IE浏览器</option>
</optgroup>
<optgroup label="PC端">
<option value="1">MAC OS</option>
<option value="2">Windows</option>
<option value="3">Linux</option>
</optgroup>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-1 col-md-1 control-label">多选</label>
<div class="col-lg-11 col-md-11">
<select id="multiple" class="form-control select2" multiple="multiple">
<optgroup label="移动端">
<option value="1">android</option>
<option value="2">ios</option>
</optgroup>
<optgroup label="web端">
<option value="1">谷歌浏览器</option>
<option value="2">火狐浏览器</option>
<option value="3">IE浏览器</option>
</optgroup>
<optgroup label="PC端">
<option value="1">MAC OS</option>
<option value="2">Windows</option>
<option value="3">Linux</option>
</optgroup>
</select>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ajax与json 获取数据并在前台使用简单实例
- jQuery使用ajax跨域获取数据的简单实例
- Select2在使用ajax获取远程数据时显示默认数据的方法
- jQuery使用ajax跨域获取数据的简单实例
- Select2在使用ajax获取远程数据时显示默认数据
- 如何使用Ajax从服务端获取数据
- ASP.NET AJAX中 复杂数据类型使用简单实例
- 关于使用AJAX获取数据时，由于IE缓存而导致数据不更新，串数据的问题!
- winsock简单使用（采用select轮询方式，从客户端获取数据）
- 使用 AJAX，局部刷新 GridView 进行数据绑定的简单实现
- JSP基础语法之一：Scriptlet使用、简单的JSP获取表单数据再输出表格
- Struts1.x下使用jquery的Ajax获取后台数据
- ThinkPHP定时ajax获取后台数据，使用javascript动态修改前端页面的表格来显示数据
- jQuery使用ajax跨域获取数据
- 使用 AJAX，局部刷新 GridView 进行数据绑定的简单实现
- jQuery使用ajax跨域获取数据
- 使用 AJAX，局部刷新 GridView 进行数据绑定的简单实现
- Ajax 之使用 XMLHttp实现简单的异步数据加载
- MVC中使用ajax和json传递数据简单示例
- 简单的AJAX获取数据库表数据