bootstrap-select动态组装下拉选项（option）

概述：

如果你想要使用bootstrap-select去检索的话，那么需要动态组装下拉框选项（option）;

最后达到的效果

为下拉框绑定键盘事件

涉及内容：

• 先决条件
• 代码编写
• 代码解释
• 整体代码

1、先决条件

1.1、下载bootstrap最新插件，笔者是3.3.7版本

官方地址：https://getbootstrap.com//

1.2、jquery:可以下载下来，可以使用远程的jquery

地址：https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js/

1.3、下载boostrap-select插件

http://silviomoreto.github.io/bootstrap-select/

2、代码编写

引入css和js

注意替换你的文件路径

html标签

 
		查询设备
	

js代码

//检索设备
$("#queryDevice").on('shown.bs.select',function(e){
	$('#queryDevice').prev().find("input").keyup(function(){
		$('#queryDevice').prev().find("input").attr('id',"deviceInput"); //为input增加id属性
		console.log($('#deviceInput').val()); //获取输入框值输出到控制台
		var deviceInput = $('#deviceInput').val();
		var deviceStr="" ;
		for(var i=0; i<8; i++){
			deviceStr+=" 设备"+i+""; 
		}
		$("#queryDevice").html("");
		$('#queryDevice').append(deviceStr);
		$('#queryDevice').selectpicker('refresh');
	})
});

3、代码解释

• $('#queryDevice').prev().find("input").keyup ： 为输入下拉框绑定按键事件，为啥这样参考：http://blog.csdn.net/m0_37355951/article/details/78287278
• $('#queryDevice').prev().find("input").attr('id',"deviceInput"); 为输入框新增属性id，方便找到这个input元素
•  $('#deviceInput').val();获取输入框的值
• deviceStr+=" 设备"+i+"";  组装option字符串
• $("#queryDevice").html(""); 清空元素
• $('#queryDevice').append(deviceStr); 将生成的字符串添加到select标签下
• $('#queryDevice').selectpicker('refresh'); ： 这句很关键，类似刷新意思，不然不会生效

4、整体代码

    
		查询设备
	

效果如上所示