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

最新推荐文章于 2024-03-17 09:44:42 发布

往前的

最新推荐文章于 2024-03-17 09:44:42 发布

阅读量3.8w

点赞数 3

分类专栏： Bootstrap实战文章标签： bootstrap boostrap-select 动态加载数据自定义数据 option选项

本文链接：https://blog.csdn.net/m0_37355951/article/details/78292910

版权

Bootstrap实战专栏收录该内容

17 篇文章 0 订阅

订阅专栏

概述：

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

最后达到的效果

为下拉框绑定键盘事件

涉及内容：

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

1、先决条件

2、代码编写

引入css和js

<link rel="stylesheet"
	href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"></link>
<link rel="stylesheet"
	href="../bootstrap-3.3.7-dist/css/bootstrap-select.min.css"></link>

<script
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript"
	src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
		src="../bootstrap-3.3.7-dist/js/bootstrap-select.min.js"></script>

注意替换你的文件路径

html标签

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

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+="<option  data-icon='glyphicon glyphicon-heart' data-tokens='"+i+"'> 设备"+i+"</option>"; 
		}
		$("#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+="<option data-icon='glyphicon glyphicon-heart' data-tokens='"+i+"'> 设备"+i+"</option>"; 组装option字符串
$("#queryDevice").html(""); 清空元素
$('#queryDevice').append(deviceStr); 将生成的字符串添加到select标签下
$('#queryDevice').selectpicker('refresh'); ：这句很关键，类似刷新意思，不然不会生效

4、整体代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>动态生成boostrap-select下拉框选项</title>
<link rel="stylesheet"
	href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"></link>
<link rel="stylesheet"
	href="../bootstrap-3.3.7-dist/css/bootstrap-select.min.css"></link>
</head>
<body>
<body>
    <select id ="queryDevice"class="selectpicker" data-live-search="true">
		<option data-tokens="ketchup mustard">查询设备</option>
	</select>
</body>
<!-- 引入jquery.js -->
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript"
	src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
		src="../bootstrap-3.3.7-dist/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
//检索设备
$("#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+="<option  data-icon='glyphicon glyphicon-heart' data-tokens='"+i+"'> 设备"+i+"</option>"; 
		}
		$("#queryDevice").html("");
		$('#queryDevice').append(deviceStr);
		$('#queryDevice').selectpicker('refresh');
	})
});
</script>
</body>

</html>

效果如上所示