bootstrap中selectpicker下拉框使用方法实例
时间:2019-04-13
本文章向大家介绍bootstrap中selectpicker下拉框使用方法实例,主要包括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代码如下:
$(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'); } }); });
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 【Flutter高级玩法- Flow 】我的位置我做主
- PCMAN FTP STOR命令栈溢出
- 一个基于ngrx的Angular图书搜索应用,带网络请求
- Android利用RecyclerView实现列表倒计时效果
- 【Flutter Unit 重大更新 1 】超好用的组件收藏夹上线
- android特卖列表倒计时卡顿问题的解决方法
- dotnet 多线程禁止同时调用相同的方法 禁止方法重入调用 双检锁的设计
- android实现倒计时功能(开始、暂停、0秒结束)
- 【-Flutter/Dart 语法补遗-】 sync* 和 async* 、yield 和yield* 、async 和 await
- android实现条目倒计时功能
- Android实现简单手电筒功能
- k8s安装自动证书签发cert-manager letsencrypt
- Android仿Keep运动休息倒计时圆形控件
- android通过led实现手电筒功能
- Android 7.0 手电筒控制实现