这篇博文
http://www.php.cn/js-tutorial-384637.html
注释写的比较详细, (不过他做了很多修改)
https://blog.csdn.net/bossxu_/article/details/80368471 这个也可以看看
首先,页面上引入jquery,和select2
<link rel="stylesheet" type="text/css" href="../../select2-v4.0.6/css/select2.min.css"/>
<script src="../../jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<script src="../../select2-v4.0.6/js/select2.min.js" charset="utf-8"></script>
<script src="../../select2-v4.0.6/js/i18n/zh-CN.js" charset="utf-8"></script>
页面上写好select
<select class="js-example-basic-single content-input" name="circleId" id="circleId"></select>
js
//获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}
var userId = getUrlParam('userId')
$('#circleId').select2({
placeholder: '请选择圈子',
language: "zh-CN",
// data:[{ id: employeeId, text: partmentName}], // 默认值填写 value 是id text:是名字 不能使用其他字段
// inputMessage:'信息科',
ajax: {
url: options["url"],
type: "post",
dataType: "json",
delay: 250,
headers: {
apikey: sessionStorage.getItem('apikey') || 'test'
},
data: function(params){
// 传递到后端的参数
return {
// 搜索框内输入的内容
// selectInput: params.term,
// 当前页
// page: params.page || 0,
// 每页显示多少条记录,默认10条
// row: 10,
cmd: cmd,
data: JSON.stringify({
isJoin: 2,
page: params.page || 0,
row: 10,
userId: userId,
keyWord: params.term
}),
};
},
processResults: function (data, params) {
params.page = params.page || 0;
var d_l = data.data;
return {
results: d_l,
pagination: {
more: (params.page) < data.total
}
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
},
templateResult: function (repo) {
if (repo.loading) {
return repo.text;
} else {
return repo.circleName; //选中 显示的名称
}
},
templateSelection: function (data) {
return data.circleName||data.text;
}
});