bootstrap下拉选的封装

bootstrap下拉选的封装

后台

 @RequestMapping("/getSelectFarm")
 public HashMap<String, Object> getSelectFarm(Integer type){
        return selectService.getSelectFarm(type);
 }
@Override
public HashMap<String, Object> getSelectFarm(Integer type){
        StringBuilder stringBuilder = new StringBuilder(); 
        List<Order> orders = new ArrayList<Order>();
		Order rankNo = new Sort.Order(Sort.Direction.ASC, "rankNo");
		orders.add(rankNo);
		Sort sort = new Sort(orders);
		HashMap<String, Object> hashMap = new HashMap<String, Object>();
		List<RbaseFarmInfo> farmList = rbaseFarmInfoDao.findByDataType(type,sort);
		
        for(int i=0;i<farmList.size();i++){
        	stringBuilder.append("<option value=\""+farmList.get(i).getFarmId()+"\">"+farmList.get(i).getFarmName()+"</option>");
        }
        hashMap.put("rbaseNetList", stringBuilder);
        return hashMap;
    
	}

前台调用

<div class="layui-inline">
	  <label class="layui-form-label">场 站：</label>
	  <div class="layui-input-inline">
			<select class="selectpicker" id="slpk"  data-live-search="true" style="width:200px;height:500px"
data-selected-text-format="count" data-live-search-placeholder="搜索" multiple data-max-options="1" name="请选择地区" th:field="*{objId}"  onchange="change()"></select>
<input type="hidden" id="hiddenName" th:field="*{name}">
</div>

$(function() {
		$.ajax({
	   	 crossDomain: true,
		    xhrFields: {
		   	    withCredentials: true
		   	},	
		   	async:false,//同步执行 
	   	type:"post",
	   	url:[[@{/getSelectFarm}]],
	   	data:{type:1},
	   	datatype:"json",
	   	success:function(data){
			var select = $("#slpk");
			select.append(data.rbaseNetList);
			var typeArr=[[${commonBean.objId}]]; //回显
	   		if(typeArr != null){
	   			select.selectpicker('val', typeArr);
	   		}
	   	},
	   	error:function(data){
	   		alert("error!")
	   	}
	   	
	   });
	});
	
	function change(){
		var options=$("#slpk option:selected"); //获取选中的项
		$("#hiddenName").val(options.text());//拿到选中项的文本

	}