bootstrap插件bootstrap-select用法

最新推荐文章于 2024-05-15 00:21:36 发布

Developer Hu

最新推荐文章于 2024-05-15 00:21:36 发布

阅读量3.2w

点赞数 1

分类专栏： # bootstrap

本文链接：https://blog.csdn.net/csdn_huzeliang/article/details/79153075

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目中要用到下拉多选，几经查询找到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" --》用于选择固定个数

Developer Hu

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
bootstrap插件bootstrap-select用法

项目中要用到下拉多选，几经查询找到bootstrap-select插件，下面把我在项目中用到的一些记录下来以供参考:附上官网api链接，http://silviomoreto.github.io/bootstrap-select/.需要引入以下css和js文件（如有差异自行调整）: bootstrap.css bootstrap-select.min.css
复制链接

扫一扫

专栏目录