bootstrap-select插件

当使用bootstrap框架时,如果select框的下拉选项太多,会不方便查找,这时可以利用bootstrap-select插件的查询功能,会非常方便。

bootstrap-select插件依赖jquery和bootstrap,所以需要先引入jquery和bootstrap。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bootstrap-select 搜索下拉框</title>
    <!-- 先引入jquery -->
    <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <!-- 再引入bootstrap -->
    <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- 最后引入bootstrap-select -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
</head>
<body>
<select class="selectpicker show-tick form-control" data-live-search="true">
    <option>中国</option>
    <option>美国</option>
    <option>德国</option>
    <option>英国</option>
    <option>法国</option>
    <option>西班牙</option>
</select>
</body>
</html>

效果图:
2019121923572451

当下拉选项过多时,可以再input框里面输入需要查询的项,该插件会自动模糊匹配选项。示例如下:
2019121923585759

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/2993.html

发表评论

登录后才能评论