首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于Bootstrap下拉框插件bootstrap-select使用方法详解

Posted in Javascript onAugust 07, 2018

写在前面：

在这次的项目中，没有再使用liger-ui做为前端框架了，改为了Bootstrap,这次也好接触下新的技术，在学习的过程中发现，Bootstrap的一些组件基本都是采用class的形式，就是给一个它定义好的样式，就会给你展现出一个好看的组件出来，这个比liger-ui的界面做的要好，但是了解了Boostrap的基本语法后，发现在官方的文档中，并没有一些可以动态加载组件的demo,因为之前用的liger-ui，大多数组件都只需要写一行代码，就能很好的，并且很方便的直接与后台进行交互，并动态加载数据。但是bootstrap的文档中并没有这样的例子。毕竟它就是做静态的，只需要给一个样式，那我动态加载数据怎么办？全部自己封装吗？后面查阅资料发现，有许多常用的组件插件是基于bootstrap来进行封装的，这就需要我们如果要使用什么组件，可以单独的再去下载它的插件。这个时候，就可以做到很方便的像后台发送数据进行动态加载了。这里就记录下，一些常用的bootstrap的组件插件吧，首先是下拉框。

基于Bootstrap的下拉框也有好几个，这里我选择了bootstrap-select.js.下面就简单的记录下它的用法吧，主要是动态的加载数据。

首先还是上代码，毕竟代码最直观。

前台jsp页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
 String scheme = request.getScheme();
 String serverName = request.getServerName();
 String contextPath = request.getContextPath();
 int port = request.getServerPort();

 //网站的访问跟路径
 String baseURL = scheme + "://" + serverName + ":" + port
  + contextPath;
 request.setAttribute("baseURL", baseURL);
 System.out.println("baseURL:" + baseURL);
%>

<html>
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>bootstrap-select测试</title>
 <%--导入bootstrap与select样式--%>
 <link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" />
 <link href="${baseURL}/Bootstrap/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
 <%--先导入jqury插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
 <%--导入bootstrap插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>
 <%--下拉框插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap-select/js/bootstrap-select.js"></script>
 </head>
 <body>

 <label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Role</label>
 <%--给一个class=“selectpicker” 改变下拉框的宽度用data-width --%>
 <select id="sel_role" name="role" class="selectpicker" title="请选择" data-width="150px" style="">
 </select>
 </body>
<script>
 $(function(){
 //初始化下拉框
 //动态加载
 $.ajax({
  type: 'get',
  url: '${baseURL}/listAllRole',
  dataType: "json",
  success: function (data) {
  //拼接下拉框
  for(var i=0;i<data.length;i++){
   $("#sel_role").append("<option value='"+data[i].roleId+"'>"+data[i].roleName+"</option>");
  }
  //这一步不要忘记 不然下拉框没有数据
  $("#sel_role").selectpicker("refresh");
  }
 });
 
 });
</script>
</html>

首先要导入相关的样式以及js插件，由于bootstrap是基于jquery的，故要先导入jquery插件，然后bootstrap-select又是基于bootstrap的。故先导入bootstrap，再导入bootstrap-select.这里要注意下导入的顺序呢。

对于动态的加载数据，还是要自己进行拼接，然后refresh一下，这个一定不能忘记，不然不会出来数据。由于此次的后台还是ssh框架，故后台查询下拉框的数据，并如何返回json给前台页面，这里就不再详细的说了，之前在ligerui博文中都有写过，并提及过。

看下效果图吧:

基于Bootstrap下拉框插件bootstrap-select使用方法详解

除了常用的单个下拉框外，还有最常见的就是下拉框级联了，这里也写个demo来记录一下，代码如下，也是只上前台jsp页面的代码，后台json数据的传递就不再说了。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
 String scheme = request.getScheme();
 String serverName = request.getServerName();
 String contextPath = request.getContextPath();
 int port = request.getServerPort();
 //网站的访问跟路径
 String baseURL = scheme + "://" + serverName + ":" + port
  + contextPath;
 request.setAttribute("baseURL", baseURL);
 System.out.println("baseURL:" + baseURL);
%>
<html>
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>bootstrap-select测试</title>
 <%--导入bootstrap与select样式--%>
 <link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" />
 <link href="${baseURL}/Bootstrap/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
 <%--先导入jqury插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
 <%--导入bootstrap插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>
 <%--下拉框插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap-select/js/bootstrap-select.js"></script>
 </head>
 <body>

 <label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Biz Unit</label>
 <select id="sel_bizUnit" name="bUnitId" class="selectpicker" title="请选择" data-width="150px" style="">
 </select>
    
 <label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Division</label>
 <select id="sel_division" name="divId" class="selectpicker"title="请选择" data-width="150px" style="">
 </select>

 </body>
<script>
 $(function(){
 //初始化下一级下拉框
 //动态加载
 $.ajax({
  type: 'get',
  url: '${baseURL}/listAllSABusinessUnit',
  dataType: "json",
  success: function (data) {
  for(var i=0;i<data.length;i++){
   $("#sel_bizUnit").append("<option value='"+data[i].bUnitId+"'>"+data[i].bUnitName+"</option>");
  }
  $("#sel_bizUnit").selectpicker("refresh");
  }
 });

 //二级下拉框的选项随一级下拉框的值而改变
 $("#sel_bizUnit").change(function(){
  //根据bUnit去获取Division
  $.ajax({
  type: 'get',
  url: '${baseURL}/getSADivisionByBUnit?bUnitId='+$("#sel_bizUnit").val(),
  dataType: "json",
  success: function (data) {
   if(data.length == 0){
   //如果一级没有对应的二级 则清空二级并 不往下执行
   $("#sel_division").empty();
   $("#sel_division").selectpicker("refresh");
   return ;
   }
   //如果一级有对应的二级 则进行拼接
   //每次拼接前都进行清空
   $("#sel_division").empty();
   for(var i=0;i<data.length;i++){
   $("#sel_division").append("<option value='"+data[i].divId+"'>"+data[i].divName+"</option>");
   }
   //这里千万别忘记了
   $("#sel_division").selectpicker("refresh");
  }
  });
 });
 });
</script>
</html>

代码都比较简单，基本看下就会了，也就是根据一级下拉框的值去查询获取对应的二级下拉框的值，然后拼接加载出来就完事了。值得注意的点，当一级没有对应的二级时，此时也应该将二级清空并refresh一下，不然当第一次勾选一级a，对应有二级，接着再次选择一级b，没有对应的二级时，还是会显示出一级a对应的二级。所以这个时候也应该清空一下。这些小细节可以按照自己的项目需求来。看下效果图：

基于Bootstrap下拉框插件bootstrap-select使用方法详解

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

基于Bootstrap下拉框插件bootstrap-select使用方法详解

- Author -

蚊蚊蚊蚊蚊170624

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 #Javascript
详解如何在vue-cli中使用vuex
Aug 07 #Javascript
React styled-components设置组件属性的方法
Aug 07 #Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 #Javascript
详解vue axios用post提交的数据格式
Aug 07 #Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 #Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 #Javascript
Set接口(1) Vue3(1) persistedstate(1) HDR(1) 曝光融合(1) InputStream(1) axios(1) 高动态范围(1) OutputStream(1) vuex(1)
You might like
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP中“=&gt;
2019/03/01 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python二维码生成识别实例详解
2019/07/16 Python
python openpyxl使用方法详解
2019/07/18 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
Python实现汇率转换操作
2020/05/03 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
英国领先的瓷砖专家：Walls and Floors
2018/04/27 全球购物
荣耀俄罗斯官网：HONOR俄罗斯
2020/10/31 全球购物
应聘教师自荐信
2013/10/12 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
2015年预算员工作总结
2015/05/14 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python