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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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 header下载函数
2014/01/31 PHP
php+mysql实现无限级分类
2015/11/11 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python使用分治法实现求解最大值的方法
2015/05/12 Python
python列表的常用操作方法小结
2016/05/21 Python
PyQt5实现拖放功能
2018/04/25 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
北承题目(C++)
2012/05/16 面试题
电信专业毕业生推荐信
2013/11/18 职场文书
教师演讲稿范文
2014/01/08 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
结对共建工作方案
2014/06/02 职场文书
2014年中秋寄语
2014/08/11 职场文书
三八妇女节标语
2014/10/09 职场文书
工人先进事迹材料
2014/12/26 职场文书
贪污检举信范文
2015/03/02 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫