1、页面添加 html
并引用 select2 js
<label class="sech-label">账号:</label>
<select data-live-search="true" id="grpDownList" name="grp">
<option value="" selected="selected">请选择</option>
</select>
2、js
//初始化 select2下拉框,该方法是首次初始化会调用该方法,当用户点击下拉框会通过此方法搜索数据
function initGrpSelect(){
var time = $('#dateTimeRange').val();
var stime = time.substr(0, time.indexOf("_")).trim();
var etime = time.substr(time.indexOf("_") + 1, time.length).trim();
$c_HospitalCode = $("#grpDownList").select2({
placeholder : '请选择',
language : "zh-CN",
width : "160px",
allowClear : true,
ajax : {
type : "post",
url : "tsharehosttrendday/siplist",
dataType : 'json',
delay : 250,
data : function(params) {
var page;
if (params.page == null) {
page = 1;
} else {
page = params.page;
}
var limit = 30;
return {
"page" : page,
"limit" : limit,
"stime" : stime,
"etime" : etime,
};
},
cache : true,
processResults : function(data, params) {// 结果处理
params.page = params.page || 1;
if (data.code==0) {
return {
results : data.page.list,
pagination : {
more : (params.page * 30) < data.page.totalCount
}
};
}
},
},
templateResult : function(repo) {
return repo.text;
},
templateSelection : formatRepoSelection
});
}
//获取主机列表下拉条件,设置首次默认选中的数据 ,
function getGrpData() {
var time = $('#dateTimeRange').val();
var stime = time.substr(0, time.indexOf("_")).trim();
var etime = time.substr(time.indexOf("_") + 1, time.length).trim();
$.ajax({
url : "tsharehosttrendday/siplist",
dataType:'json',
data:{"page" : 1,"limit" : 1,"stime" : stime,"etime" : etime},
success: function (data) {
if(data.page.list.length>0){
var option = new Option(data.page.list[0].id, data.page.list[0].id, true, true); //设置下拉框为选中为第一条数据
$c_HospitalCode.append(option);
}else{
$("#grpDownList").empty();//无数据则设置下拉框为不选中
}
$c_HospitalCode.trigger('change');//使用这个方法显示到select2上.
initTable(); //初始化表格
initGrpSelect();//初始化搜索
}
});
}
function formatRepoSelection(repo) {
return repo.text;
}
change_lk("urlSearch");
$("#grpDownList").on("change",function(){
search();
});
function search() {
initTable();
}