bootstrap插件bootstrap-select用法
董凡
项目中要用到下拉多选，几经查询找到bootstrap-select插件，下面把我在项目中用到的一些记录下来以供参考:
附上官网api链接，http://silviomoreto.github.io/bootstrap-select/.
需要引入以下css和js文件（如有差异自行调整）:
bootstrap.css
bootstrap-select.min.css
jquery-1.11.3.min.js
bootstrap.min.js
bootstrap-select.min.js代码如下（可直接复制粘贴，效果即来）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-select.css" />
<title></title>
</head>
<body>
<!--<select id="slpk" class="selectpicker" data-live-search="true" multiple></select>-->
<div class="form-group">
<label class="col-sm-3 control-label">客资类型：</label>
<div class="col-sm-4">
<select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple data-max-options="3" data-live-search="true">
<option value="0" style="background: #5cb85c; color: #fff;">苹果</option>
<option value="1" data-icon="glyphicon-heart">菠萝</option>
<option value="2" data-content="<span class='label label-success'>香蕉</span>">香蕉</option>
<option value="3" data-content="<span class='label label-success'>火龙果</span>">火龙果</option>
<option value="4" data-content="<span class='label label-success'>梨子</span>">梨子</option>
<option value="5">草莓</option>
<option value="6">哈密瓜</option>
<option value="7">椰子</option>
<option value="8">猕猴桃</option>
<option value="9">桃子</option>
</select>
</div>
</div>
</body>
<script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-select.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$(".selectpicker").selectpicker({
noneSelectedText: '请选择',
countSelectedText: function(){}
});
});
function selectValue() {
//获取选择的值
alert($('#usertype').selectpicker('val'));
}
</script>
</html>bootstrap-select插件属性：
data-max-options="3" --》用于选择固定个数
类似资料：