bootstrap select 多选 搜索框 常用

9967595-49cdfd6695c6b101.png
image.png

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>联想控股</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-select.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.js"></script>
</head>
<body>
<div class="container">


<div class="row">
<label class="col-sm-3 control-label" style="line-height: 34px;margin-bottom: 20px;">选择用户:</label>
<div class="col-sm-6">
<select class="selectpicker" multiple data-live-search="true">
<option value="苹果">苹果</option>
  <option value="菠萝">菠萝</option>
  <option value="香蕉">香蕉</option>
  <option value="火龙果">火龙果</option>
  <option value="梨子">梨子</option>
  <option value="草莓">草莓</option>
  <option value="哈密瓜">哈密瓜</option>
  <option value="椰子">椰子</option>
  <option value="猕猴桃">猕猴桃</option>
  <option value="桃子">桃子</option>
</select>
</div>
</div>
</div>

</body>
</html>

转载于:https://www.jianshu.com/p/c9a6e945e784

猜你喜欢

转载自blog.csdn.net/weixin_34358092/article/details/91071732