热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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(""); 
select.append(""); 
select.append(""); 
select.append(""); 
select.append(""); 
select.append(""); 
select.append(""); 
//初始化刷新数据 
 $(window).on('load', function() { 
  $('.selectpicker').selectpicker('refresh'); 
 }); 
}); 

3、jsp内容:

 

设置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[i].ROAD_NAME + ""); 
    } 
    $('.selectpicker').selectpicker('val', ''); 
    $('.selectpicker').selectpicker('refresh'); 
   } 
  }); 
 }); 

总结

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


推荐阅读
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
  • 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
  • 本文讨论了如何根据特定条件动态显示或隐藏文件上传控件中的默认文本(如“未选择文件”)。通过结合CSS和JavaScript,可以实现更灵活的用户界面。 ... [详细]
  • Composer Registry Manager:PHP的源切换管理工具
    本文介绍了一个用于Composer的源切换管理工具——Composer Registry Manager。该项目旨在简化Composer包源的管理和切换,避免与常见的CRM系统混淆,并提供了详细的安装和使用指南。 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
author-avatar
mobiledu2502870133
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有