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‘);

   }

  });

 });

总结

原文地址：https://www.cnblogs.com/zhuyeshen/p/11419257.html

时间： 2024-12-03 14:42:56

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

利用下拉框的方法进行txt列表中内容的左右切换

利用下拉框的方法实现两个txt列表内内容的左右切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id="left" size="10" multiple="multiple" style=

android中自定义下拉框（转）

android自带的下拉框好用不?我觉得有时候好用,有时候难有,项目规定这样的效果,自带的控件实现不了,那么只有我们自己来老老实实滴写一个新的了,其实最基本的下拉框就像一些资料填写时,点击的时候出现在编辑框的下面,然后又很多选项的下拉框,可是我在网上找了一下,没有这种下拉框额,就自己写了一个,看效果图先: ,这个是资料填写的一部分界面,三个下拉框,选择故乡所在地: 点击之后弹出下拉框,选择下面的选项: 三个下拉框时关联的,第一个决定了第二数据内容,第二个决定了第三个数据内容,如果三个全部选好之后

IE6浏览器下div无法遮盖select下拉框解决方法

IE6浏览器下div无法遮盖select下拉框解决方法:在IE6浏览器下,select下拉框无法被div遮盖,其他的主流浏览器都是正常的.这里简单介绍一下如何解决此问题.默认状态下IE6的表现: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn

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

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

Bootstrap中的下拉菜单

下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ?  LESS版本:对应的源码文件为 dropdowns.less ?  Sass版本:对应的源码文件为 _dropdowns.scss ?  编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版

easyUI中select下拉框添加option选项

使用jquery easyui的下拉列表combobox碰上问题,下拉列表的项都是从 数据库读出来的,然后我想在动态生成的项中添加一项:"<option value=''>=全部=</option>". 但怎么也添加不成功. 首先试了直接用jquery对该下拉列表进行添加操作: JavaScript code ? 1 2 3 4 5 6 7 8 $('#selUnin').combobox({         url: _callback_url + '&

下拉框联动方法封装

业务中经常需要对数据进行下拉框的联动选择操作,可以假设成省份城市 省份城市县这样的多级联动 客户那边提供的数据大多为excel,格式都属于标准一行列的 假设需要对省份城市进行联动 实现如下 1 var pcd = []; 2 pcd[0] = ['北京', '北京']; 3 pcd[1] = ['天津', '天津']; 4 pcd[2] = ['河北', '石家庄']; 5 pcd[3] = ['河北', '唐山']; 6 pcd[4] = ['山西', '太原']; 7 pcd[5] = ['

.NET MVC中给下拉框填充数据

在MVC 中绑定模型的视图,很多时候都会用到下拉框,所以在此记录一下根据DataTable中的数据给下拉框填充数据的方法 1 /// <summary> 2 /// 将 DataTable 转成下拉框的填充数据List<SelectListItem>类型 3 /// </summary> 4 /// <param name="dt">数据DataTable</param> 5 /// <param name="

省份城市下拉框联动简单实例实现方法

效果如下 //定义字典 Dictionary<string, string> Address = new Dictionary<string, string>(); void loadData() { //这是你要添加的数据 //也可以选择动态添加但是考虑到数据不多不影响性能就这么做了 Address.Add("绵阳", "四川"); Address.Add("成都", "四川"); Address.A