bootstrap-select uses-HTML Tutorial-php.cn

bootstrap-select uses

阿神

Release： 2016-11-08 14:20:37

Original

1980 people have browsed it

bootstrap-select没提供动态请求数据的方法,解决动态添加的问题

下载,例子,文档地址
http://silviomoreto.github.io/bootstrap-select/

<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>

Copy after login

<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>

Copy after login

$("#goodsNames").selectpicker({});  //初始化
   var s = "";
   var timeOut = "";
   $(".input-block-level").bind("propertychange input",function(event){   //添加input框事件
       s = $(this).val();
       clearTimeout(timeOut);
       timeOut = setTimeout(function(){   //设置延后ajax请求
           var tempAjax = "";
           $.ajax({
                 type : &#39;GET&#39;,
                 url : &#39;&#39;,
                 dateType : &#39;json&#39;,
                 data : "goodsName="+s,
                 success: function(msg){
                     $.each(msg,function(i,n){
                        tempAjax += "<option value=&#39;"+n.id+","+n.name+","+n.goodsUnit+","+n.sellReason+","+n.goodsPrice+"&#39;>"+n.name+"</option>";
                     });
                     $("#goodsNames").empty();
                     $("#goodsNames").append(tempAjax);    
                                         //更新内容刷新到相应的位置
                     $(&#39;#goodsNames&#39;).selectpicker(&#39;render&#39;);
                     $(&#39;#goodsNames&#39;).selectpicker(&#39;refresh&#39;);
                 }
            })
        },700);
        
   })

Copy after login

bootstrap-select uses