您的位置：首页 > Web前端 > BootStrap

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

2017-10-20 10:44 459 查看

概述：

如果你想要使用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>

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

效果如上所示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

1、先决条件

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

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

1.3、下载boostrap-select插件

2、代码编写

3、代码解释

4、整体代码