select2 Ajxa 请求后台数据 并默认选中第一个数据

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();
}




猜你喜欢

转载自blog.csdn.net/chenzhenguo123/article/details/79994931