bootstrap中selectpicker下拉框使用方法实例

最新推荐文章于 2022-05-31 16:40:31 发布

夏侯羽

最新推荐文章于 2022-05-31 16:40:31 发布

阅读量4k

点赞数

分类专栏：前端文章标签： bootstrap selectpicker

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件，先看效果如下：

附上官网api链接，http://silviomoreto.github.io/bootstrap-select/.

下拉框的使用上基本操作一般是：单选、多选、模糊搜索、动态赋值等，下面来看如何使用：

使用方法如下

1、首先需要引入的css和js：

    bootstrap.css
    bootstrap-select.min.css
    jquery-1.11.3.min.js
    bootstrap.min.js
    bootstrap-select.min.js

2、js代码如下：

 
        $( 
        function 
        () {  
       
        $( 
        ".selectpicker" 
        ).selectpicker({  
       
        noneSelectedText :  
        '请选择' 
        //默认显示内容  
       
        });

 
        //数据赋值  
       
 
        var 
        select = $( 
        "#slpk" 
        );  
       
 
        select.append( 
        "<option value='1'>香蕉</option>" 
        );  
       
 
        select.append( 
        "<option value='2'>苹果</option>" 
        );  
       
 
        select.append( 
        "<option value='3'>橘子</option>" 
        );  
       
 
        select.append( 
        "<option value='4'>石榴</option>" 
        );  
       
 
        select.append( 
        "<option value='5'>棒棒糖</option>" 
        );  
       
 
        select.append( 
        "<option value='6'>桃子</option>" 
        );  
       
 
        select.append( 
        "<option value='7'>陶子</option>" 
        ); 
       

 
        //初始化刷新数据  
       
        $(window).on( 
        'load' 
        ,  
        function 
        () {  
       
        $( 
        '.selectpicker' 
        ).selectpicker( 
        'refresh' 
        );  
       
        });  
       
        });

3、jsp内容：

1	`<` `select` `id` `=` `"slpk"` `class` `=` `"selectpicker"` `data-live-search` `=` `"true"` `multiple></` `select` `>`

设置multiple时为多选，data-live-search="true"时显示模糊搜索框，不设置或等于false时不显示。

4、其他方法：

获取已选的项：

 
        var 
        selectedValues = [];   
       
        slpk:selected").each( 
        function 
        (){  
       
        selectedValues.push($( 
        this 
        ).val());  
       
        });

选择指定项（编辑回显使用）：

单选：$('.selectpicker').selectpicker('val', ‘列表id');

多选：var arr=str.split(','); $('.selectpicker').selectpicker('val', arr);

5、附上我的源码，下拉数据通过ajax从后台获取：

 
        $( 
        function 
        () {  
       
        $( 
        ".selectpicker" 
        ).selectpicker({  
       
        noneSelectedText :  
        '请选择' 
       
        });  
       
        $(window).on( 
        'load' 
        ,  
        function 
        () {  
       
        $( 
        '.selectpicker' 
        ).selectpicker( 
        'val' 
        ,  
        '' 
        );  
       
        $( 
        '.selectpicker' 
        ).selectpicker( 
        'refresh' 
        );  
       
        });  
       
        //下拉数据加载  
       
        $.ajax({  
       
        type :  
        'get' 
        ,  
       
        url : basePath +  
        "/lictran/tranStation/loadRoadForTranStationDetail" 
        ,  
       
        dataType :  
        'json' 
        ,  
       
        success :  
        function 
        (datas) { 
        //返回list数据并循环获取  
       
        var 
        select = $( 
        "#slpk" 
        );  
       
        for 
        ( 
        var 
        i = 0; i < datas.length; i++) {  
       
        select.append( 
        "<option value='" 
        +datas[i].ROAD_CODE+ 
        "'>" 
       
        + datas[i].ROAD_NAME +  
        "</option>" 
        );  
       
        }  
       
        $( 
        '.selectpicker' 
        ).selectpicker( 
        'val' 
        ,  
        '' 
        );  
       
        $( 
        '.selectpicker' 
        ).selectpicker( 
        'refresh' 
        );  
       
        }  
       
        });  
       
        });