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());//拿到選中項的文本
}