bootstrap-select插件实现下拉框搜索功能

最新推荐文章于 2024-08-08 07:40:01 发布

青藤光年

最新推荐文章于 2024-08-08 07:40:01 发布

阅读量7.2k

点赞数 4

文章标签： bootstrap-select· 下拉框搜索下拉框多选

BootStrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

工作上要用到在下拉框内实现搜索功能，原生的select标签是不能输入的，所以最终找到了bootstrap-select插件，功能十分强大，支持搜索，多选，分组选中等。

本文摘取自：

bootstrap框架下下拉框select搜索功能

官方文档

bootstrap-select开源地址：https://github.com/silviomoreto/bootstrap-select

bootstrap-select使用示例：http://silviomoreto.github.io/bootstrap-select/examples/

bootstrap-select文档说明：http://silviomoreto.github.io/bootstrap-select/options/

简单示例

下面先附上我的代码，实现了搜索功能，可以直接复制下来查看效果。

<html>
<head>
    <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript"
            src="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.js"></script>
    <link rel="stylesheet" type="text/css"
          href="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(window).on('load', function () {

            $('.selectpicker').selectpicker({
                'selectedText': 'cat'
            });

        });
    </script>
</head>
<body>
<div class="container">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="bs3Select" class="col-lg-2 control-label">Test bootstrap 3 form</label>
            <div class="col-lg-10">
                <select id="bs3Select" class="selectpicker show-tick form-control" multiple data-live-search="true">
                    <option>cow</option>
                    <option>bull</option>
                    <option class="get-class" disabled>ox</option>
                    <optgroup label="test" data-subtext="another test" data-icon="icon-ok">
                        <option>ASD</option>
                        <option selected>Bla</option>
                        <option>Ble</option>
                    </optgroup>
                </select>
            </div>
        </div>
    </form>
</div>

</body>
</html>

附上上面js、css文件的地址：官方地址

使用方式

1.定义class属性selectpicker，就可以自动初始化

<select class="selectpicker">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

2.多选

<select class="selectpicker" multiple>
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

3.给组件加搜索功能

<select class="selectpicker" multiple data-live-search="true">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

4.选项分组

<select class="form-control selectpicker" data-live-search="true" multiple>
      <optgroup label="广东省">
            <option value="1">广州市</option>
            <option value="2">深圳市</option>
            <option value="3">珠海市</option>
       </optgroup>   
       <optgroup label="广西">
             <option value="1">南宁市</option>
             <option value="2">柳州</option>
             <option value="3">桂林市</option>
       </optgroup>  
       <optgroup label="山东">
             <option value="1">烟台</option>
             <option value="2">青岛</option>
             <option value="3">济南</option>
        </optgroup>                          
</select>

5.设置最多选中项为2个

<select class="selectpicker" multiple data-live-search="true" data-max-options="2">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

6.缩略模式，比如当选中值大于3个的时候只显示选中项的个数，注意这个属性只对多选生效

<select class="selectpicker" multiple data-live-search="true" data-selected-text-format="count > 3">
    <option value="1">广东省</option>
    <option value="2">广西省</option>
    <option value="3">福建省</option>
    <option value="4">湖南省</option>
    <option value="5">山东省</option>                            
</select>

7.显示带颜色的标签

<select class="form-control selectpicker" title="请选择省份" multiple>
    <option data-content="<span class='label label-success'>广东省</span>">广东省</option>
    <option data-content="<span class='label label-info'>广西省</span>">广西省</option>
    <option data-content="<span class='label label-warning'>福建省</span>">福建省</option>
    <option data-content="<span class='label label-danger'>山东省</span>">山东省</option>
</select>

8.默认样式选择

<select class="selectpicker" data-style="btn-primary">
  ...
</select>

<select class="selectpicker" data-style="btn-info">
  ...
</select>

<select class="selectpicker" data-style="btn-success">
  ...
</select>

<select class="selectpicker" data-style="btn-warning">
  ...
</select>

<select class="selectpicker" data-style="btn-danger">
  ...
</select>

9.关于动态赋值。

bootstrap-select是默认只加载静态数据的，如果你想加载到通过Ajax等方式动态添加的数据，就在生成option后调用方法refresh来实现更新。

$('.selectpicker').selectpicker('refresh');

10.赋值取值

组件取值

var value = $('#sel').val();

如果是多选，这里得到的value变量是一个数组变量，形如 ['1','2','3']。

组件赋值

$('.selectpicker').selectpicker('val', '1');

在一些级联选择的使用场景中，经常需要在赋值的时候顺便触发一下组件的change事件，我们可以这么做。

$('.selectpicker').selectpicker('val', '1').trigger("change");

如果是多选的赋值，也是一样

$('.selectpicker').selectpicker('val', ['1','2','3']).trigger("change");

11.组件其他用法

全选

$('.selectpicker').selectpicker('selectAll');

反选

 $('.selectpicker').selectpicker('deselectAll');

适应手机模式

 $('.selectpicker').selectpicker('mobile');

组件禁用

$('.disable-example').prop('disabled', true);
$('.disable-example').selectpicker('refresh');

组件启用

$('.disable-example').prop('disabled', false);
$('.disable-example').selectpicker('refresh');

组件销毁

$('.selectpicker').selectpicker('destroy');

12.补充说明

使用bootstrap-select必须引入下面四个文件

如果你的项目里同时使用了H-ui，恭喜你，你要被坑了，因为这四个文件和h-ui.min.js和h-ui.min.css冲突，所以你可能遇到点击下拉框不弹窗的情况。建议用合理的顺序引入这几个文件，避免冲突。

青藤光年

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
bootstrap-select插件实现下拉框搜索功能

工作上要用到在下拉框内实现搜索功能，原生的select标签是不能输入的，所以最终找到了bootstrap-select插件，功能十分强大，支持搜索，多选，分组选中等。本文摘取自：JS组件系列——再推荐一款好用的bootstrap-select组件，亲测还不错bootstrap框架下下拉框select搜索功能官方文档bootstrap-select开源地址：https://g...
复制链接

扫一扫

专栏目录