Maison > interface Web > tutoriel HTML > bootstrap-select使用

bootstrap-select使用

阿神
Libérer: 2016-11-08 14:20:37
original
2036 Les gens l'ont consulté

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){   //添加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);

         

   })

Copier après la connexion

06180839_FEfP.png

06180839_NqrG.png

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal