bootstrap-select插件

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

kosmos1991

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

阅读量1.4k

点赞数

分类专栏：插件文章标签： bootstrap-select bootstrap-select插件 select下拉框

本文链接：https://blog.csdn.net/qq_31267183/article/details/83009251

版权

插件专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 普通的select下拉框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bootstrap-select插件</title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css" rel="stylesheet">
	</head>
	<body>
		<div class="col-sm-4">
			<select id="select" name="select" class="selectpicker form-control">
				<option value="0">苹果</option>
				<option value="1">菠萝</option>
				<option value="2">香蕉</option>
				<option value="3">火龙果</option>
				<option value="4">梨子</option>
				<option value="5">草莓</option>
				<option value="6">椰子</option>
				<option value="7">猕猴桃</option>
				<option value="8">桃子</option>
			</select>
		</div>
	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/i18n/defaults-zh_CN.min.js"></script>
	<script>
		$('.selectpicker').selectpicker({
			language: 'zh-CN', // 中文
			width: '100%',//宽度
			//size: 5, // 设置select高度，同时显示5个值
		});

		$(".selectpicker").selectpicker({
			//size: 5,
		});
	</script>
</html>

普通的select下拉框

2. 多选

<select id="select" name="select" class="selectpicker form-control" multiple data-max-options="3" >
	……
</select>

bootstrap-select插件

multiple：多选
data-max-options：最多可以选择的数量

3. 模糊查询

<select id="select" name="select" class="selectpicker form-control" data-live-search="true">
	……
</select>

bootstrap-select插件

data-live-search：检索是否开启

4. 选项加效果

<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-info'>火龙果</span>">火龙果</option>
<option value="4">梨子</option>

bootstrap-select插件