最近一直在用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');
   }
  });
 });

总结

bootstrap中selectpicker下拉框使用方法实例的更多相关文章

  1. 选择屏幕中的下拉框和dialog中下拉框设计

    REPORT  YTEST014. PARAMETERS: auart LIKE vapma-auart  AS LISTBOX   VISIBLE LENGTH 6. AT SELECTION-SC ...

  2. ASP.NET MVC中的cshtml页面中的下拉框的使用

    ASP.NET MVC中的cshtml页面中的下拉框的使用 用上@Html.DropDownList 先记下来..以做备忘...

  3. element-UI中el-select下拉框可搜索时候,filter-method自定义搜索方法

    使用element-UI框架的使用,我们经常使用el-select下拉框,很多时候还需要使用可搜索的下拉框,然后elementUI官网的实例中只是提了一下filter-method可以自定义搜索方法, ...

  4. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  5. Bootstrap selectpicker 下拉框多选获取选中value和多选获取文本值

    1.页面代码: 页面引入: bootstrap-select.min.css和 bootstrap-select.min.js. defaults-zh_CN.min.js文件,并初始化下拉选项框. ...

  6. selenium中的下拉框处理模块Select

    在UI自动化测试过程中,经常会遇到一些下拉框,如果我们基于Webdriver操作的话就需要click两次,而且很容易出现问题,实际上Selenium给我们提供了专门的Select(下拉框处理模块). ...

  7. vue中使用cookie记住用户上次选择(本次例子中为下拉框)

    最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:....... 好吧,都王的差不多了, ...

  8. android中自定义下拉框(转)

    android自带的下拉框好用不?我觉得有时候好用,有时候难有,项目规定这样的效果,自带的控件实现不了,那么只有我们自己来老老实实滴写一个新的了,其实最基本的下拉框就像一些资料填写时,点击的时候出现在 ...

  9. actionMode-theme中修改actionmode中more下拉框的背景颜色

    今天在做图库修改是,需要修改图库的actionbar某个按钮弹出来的下拉框的背景颜色,在网上找了个方法尝试下,没有打到自己的要求,不过阴差阳错的却修改了more下拉框的背景,再次记录下,也许以后能用的 ...

随机推荐

  1. jQuery与JavaScript与ajax三者的区别与联系(转)

    原文链接:  https://blog.csdn.net/qq_43154385/article/details/85003484 通过阅读,对于三者关系有一个比较清晰的认知,对于后期深入学习大有裨益 ...

  2. 【烦人的字符集】linux字符集问题,中文乱码

    [1]快速修改命令 [2]locale 查看现在服务器的字符 [root@Master ~]# localeLANG=en_US.UTF-8LC_CTYPE="zh_CN.UTF-8&quo ...

  3. [LeetCode] 135. 分发糖果

    题目链接 : https://leetcode-cn.com/problems/candy/ 题目描述: 老师想给孩子们分发糖果,有 N 个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分 ...

  4. A-问题收益率

    问题: 在金融中,我们有时会用内部收益率IRR来评价项目的投资财务效益,它等于使得投资净现值NPV等于0的贴现率.换句话说,给定项目的期数T.初始现金流CF0和项目各期的现金流CF1, CF2, …, ...

  5. 0ctf 2017 kernel pwn knote write up

    UAF due to using hlist_add_behind() without checking. There is a pair locker(mutex_lock) at delete_n ...

  6. git的配置设置

    git的基本配置 git是一个版本控制工具,既然是工具,那么就可以根据人的个人喜好来进行设置,git也提供了配置,可以根据自己的喜好来对它进行个性化的设计,以让自己舒服的玩. git有三个配置文件 / ...

  7. MFC- 网络编程

    一.MFC网络编程 a)CAsyncSocket用于异步非阻塞类,用UDP通信: b)CAsyncSocket的子类(派生类):Csocket同步阻塞类,用于TCP通信: c)通信前,必须调用AfxS ...

  8. 解决Ubuntu环境下在pycharm中导入tensorflow报错问题

    环境: Ubuntu 16.04LTS anacoda3-5.2.0 问题: ImportError: No module named tensorflow 原因:之前安装的tensorflow所用到 ...

  9. 10年前文章_fedora10root登录

    fedora10系统root用户登录以及普通用户使用sudo命令1.问题:fedora10默认不能够直接用root用户登录解决方法:我们可以先以普通用户登录$su#vi /etc/pam.d/gdm删 ...

  10. springboot中常用注解总结

    1.@RestController(组合注解):标注在类上,等价于@Controller和@Responsebody @Controller:将该类标记为Controller层的类,并且注入到Spri ...