select框下拉多选（从数据库中获取选项）
前⾯写了⼏篇关于select的⽂章，今天说⼀下select下拉框多选的问题。下拉框多选selectpicker插件做的⾮常漂亮，selectpicker是bootstrap⾥的⼀个下拉框的组件。我在这个插件初始化之前稍微加点东西，实现下拉框的选项从数据库中读取并根据传⼊值默认选中。
使⽤jQuery的扩展⽅法，适⽤于每⼀个select⽰例。
$.fn.ajaxselectmore = function(options) {
var select = this;
var data = options.value.split(",");
$.get(options.url,function(result){
for(key in result){
if(data.indexOf(key)>-1){
select.append("<option value='"+key+"' selected>"+result[key]+"</option>");
}else{
select.append("<option value='"+key+"'>"+result[key]+"</option>");
}
}
//初始化selectpicker插件
select.selectpicker({
});
});
};
页⾯引⼊selectpicker插件需要的js和css，不想⾃⼰去的同学可以到我这项⽬的包来(这个包⾥的fonts也需要)
<link rel="stylesheet" type="text/css" href="${ctx}/reports/tiles/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/reports/tiles/bootstrap/css/bootstrap-select.min.css" />
<script type="text/javascript" src="${ctx}/reports/tiles/js/jquery-2.2.3.min.js"></script>
js获取json的key和value<script type="text/javascript" src="${ctx}/reports/tiles/bootstrap/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="${ctx}/reports/tiles/bootstrap/js/bootstrap.min.js"></script>
<div class="col-xs-8">
<select id="dataId" name="dataId" class="selectpicker" multiple data-live-search="true" >
</select>
</div>
添加 class="selectpicker" multiple data-live-search="true"，页⾯初始化⽅法如下
$("#dataId").ajaxselectmore({
url:"${ctx}/rep/getAllData",
value:"1,2,3"
});
url为从后台获取数据的接⼝地址，因为是多选，所以value是多个值⽤","隔开。
/**
* 获取所有数据项
* @return json
*/
@RequestMapping(value="/getAllData",produces = "application/json; charset=utf-8") @ResponseBody
public String getAllData(){
List<DataInfo> list = InfoList();
Map<String, String> data = new HashMap<>();
list.forEach(info->{
data.Id(), DataName());
});
JSONString(data);
}
后端代码也贴个⽅法出来给⼤家参考⼀下。
实现效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。