bootstrap-select下拉输入框绑定一些事件

之前LZ写过两篇《bootstrap selectpicker 下拉框使用详解》《Bootstrap Multiselect的使用》关于bootstrap框架下拉框的这两个组件，对应LZ这样一个后台程序员来说，看前端框架感觉有些太庞杂了，以至于写这篇文章的时候，感觉组件之间已经分不清了，因为在看资料的时候居然搜到了一个国产的Multiple-Select组件，以至于看了半天也没发现不是自己使用的bootstrap框架的组件~~！

对于bootstrap-select组件而言，之前《bootstrap selectpicker 下拉框使用详解》文章中介绍了怎么使用，对于这个下拉框组件而言，这个下拉框还有一个input输入框，用来查找下拉框中的值。

 

<select id ="queryDevice"class="selectpicker" data-live-search="true">
	<option data-tokens="ketchup mustard">查询设备</option>
	<option data-tokens="mustard">设备一</option>
	<option data-tokens="frosting">设备二</option>
</select>

当时我的需求需要对这个下拉框添加点击事件，结果对原select添加点击事件根本不起作用，看页面上的源码，发现bootstrap生成的bootstrap-select组件已经完全不是之前自己写的input的样子了。

用chrome调试查看元素，看看input具体位置 按F12 

 

查文档绑定bootstrap-select事件，要选择这个属性

$("#queryDevice").on('shown.bs.select',function(e){
	console.log('展开之后');
	$('#queryDevice').prev().find("input").keydown(function(){
		$('#queryDevice').prev().find("input").attr('id',"deviceInput"); //为input增加id属性
		console.log($('#deviceInput').val()); //获取输入框值输出到控制台
	})
})