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


    最近一直在用bootstrap 的一些东西,写几篇博客记录下。。。。

    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代码如下:

    1
    2
    3
    4
    $(function() {
      $(".selectpicker").selectpicker({
       noneSelectedText : '请选择'//默认显示内容
      });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //数据赋值
    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>");
    1
    2
    3
    4
    5
    //初始化刷新数据
     $(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、其他方法:

    获取已选的项:

    1
    2
    3
    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从后台获取:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    $(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');
       }
      });
     });

    总结

  • 相关阅读:
    uni-app添加阿里巴巴图标库图标
    uni-app创建list列表
    vue-cli3.0运行单独的vue文件
    vue-cli3.0创建项目
    vue使用splice操作数组更新页面
    关于undefined出现的原因
    redux devtools的使用
    placeholder的颜色
    PHP json_encode 中文乱码
    浅谈服务治理与微服务
  • 原文地址:https://www.cnblogs.com/zhuyeshen/p/11419257.html
Copyright © 2020-2023  润新知