最近一直在用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代码如下：
https://blog.csdn.net/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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
