bootstrap-select使用

来源：网络编辑：佚名时间：2016-01-07人气：

宫品杀菌神液,成仙速成班,哈尔滨理工大学录取查询

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

下载,例子,文档地址
http://silviomoreto.github.io/bootstrap-select/ 标签： <无>

代码片段(5) [全屏查看所有代码]

1. [代码]引入相应的文件跳至 [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>

2. [代码]添加节点跳至 [1] [2] [3] [全屏预览]

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

3. [代码]js 处理跳至 [1] [2] [3] [全屏预览]

$("#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 : '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);
	   
   })