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


Posted in Javascript onMarch 22, 2018

前言

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

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

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

附上官网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内容:

<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'); 
   } 
  }); 
 });

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 #Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 #Javascript
vuex 的简单使用
Mar 22 #Javascript
Vue.js中的computed工作原理
Mar 22 #Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 #Javascript
JS中的事件委托实例浅析
Mar 22 #Javascript
jquery的 filter()方法使用教程
Mar 22 #jQuery
You might like
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
python实现自动登录
2018/09/17 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
python mock测试的示例
2020/10/19 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
《青海高原一株柳》教学反思
2014/04/25 职场文书
授权委托书
2014/07/31 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
教你怎么用Python监控愉客行车程
2021/04/29 Python
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python