bootstrap-select uses

阿神
Release: 2016-11-08 14:20:37
Original
1971 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

bootstrap-select uses

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template