您的位置：首页 > Web前端 > BootStrap

下拉列表插件bootstrap-select使用实例

2016-08-31 16:35 633 查看

网页实例 http://www.jq22.com/yanshi302
使用bootstrap-select插件来实现下来菜单搜索匹配功能，如图

实现代码如下

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-select.min.css">

<script src="jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>

</head>
<body>

<form class="form-inline">
<div class="form-group">
<label class="col-md-1 control-label" for="lunch">Lunch:</label>
</div>
<div class="form-group">
<select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
<option>中国</option>
<option>美国</option>
<option>日本</option>
<option>Baby Back Ribs</option>
<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
</select>
</div>
</form>

</body>
</html>

步骤：

1.导入相关的js和css文件，可自行下载

bootstrap-select：http://silviomoreto.github.io/bootstrap-select/

bootstrap:http://v3.bootcss.com/

JQuery:http://jquery.com/

2.设置<select></select>的属性

class="selectpicker" data-live-search="true"

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航