bootstrap-select没提供动态请求数据的方法,解决动态添加的问题
下载,例子,文档地址
http://silviomoreto.github.io/bootstrap-select/
1 2 3 | <link href= "${ctx}/assets/combobox/bootstrap-select.min.css" rel= "stylesheet" >
<script src= "${ctx}/assets/combobox/bootstrap-select.min.js" ></script>
<script src= "${ctx}/assets/combobox/defaults-zh_CN.js" ></script>
|
Copier après la connexion
1 2 3 4 5 6 | <select id= "goodsNames" class = "form-control selectpicker" data-live-search= "true" ">
<option selected>请选择团购商品</option>
<c:forEach items= "${item}" var = "item" >
<option value= "${item.id},${item.name},${item.goodsUnit},${item.sellReason},${item.goodsPrice}" >${item.name}</option>
</c:forEach>
</select>
|
Copier après la connexion
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | $( "#goodsNames" ).selectpicker({});
var s = "" ;
var timeOut = "" ;
$( ".input-block-level" ).bind( "propertychange input" , function (event){
s = $(this).val();
clearTimeout(timeOut);
timeOut = setTimeout( function (){
var tempAjax = "" ;
$.ajax({
type : 'GET',
url : '',
dateType : 'json',
data : "goodsName=" +s,
success: function (msg){
$.each(msg, function (i,n){
tempAjax += "<option value='" +n.id+ "," +n.name+ "," +n.goodsUnit+ "," +n.sellReason+ "," +n.goodsPrice+ "'>" +n.name+ "</option>" ;
});
$( "#goodsNames" ). empty ();
$( "#goodsNames" ).append(tempAjax);
$('#goodsNames').selectpicker('render');
$('#goodsNames').selectpicker('refresh');
}
})
},700);
})
|
Copier après la connexion

