最近一直在用bootstrap 的一些东西，写几篇博客记录下。。。。
bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件，先看效果如下：
附上官网api链接，http://silviomoreto.github.io/bootstrap-select/. （官方示例好像出问题了，最近一直看不到）
下拉框的使用上基本操作一般是：单选、多选、模糊搜索、动态赋值等，下面来看如何使用：
1、首先需要引入的css和js：
bootstrap.css
bootstrap-select.min.css
jquery-1.11.3.min.js
bootstrap.min.js
bootstrap-select.min.js
2、js代码如下：
5、附上我的源码，下拉数据通过ajax从后台获取：
https://blog.csdn/lu92649264/article/details/82788077
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="pkgs/jquery-2.1.1.min.js"></script>
<script src="pkgs/bootstrap-select.min.js"></script>
<script src="pkgs/bootstrap.min.js"></script>
<link rel="stylesheet" href="pkgs/bootstrap-select.css">
<link rel="stylesheet" href="pkgs/bootstrap.min.css">
</head>
<body>
<select name="" id="slpk" class="selectpicker" data-live-search="true" multiple></select>
<script>
$(function () {
$(".selectpicker").selectpicker({
noneSelectedText: "请选择"
});
var select = $("#slpk");
select.append("<option value='1'>香蕉</option>");
select.append("<option value='2'>苹果</option>");
select.append("<option value='3'>橘子</option>");
select.append("<option value='4'>石榴</option>");
$(window).on("load", function(){
$(".selectpicker").selectpicker("val", "")
$(".selectpicker").selectpicker("refresh");
})
var selectedValues = [];
$("#slpk:selected").each(function(){
selectedValues.push($(this).val());
});
console.log(selectedValues);
})
</script>
</body>
</html>
更多推荐
bootstrap selectpicker 下拉框使用详解
发布评论