基于Bootstrap下拉框插件bootstrap-select使⽤⽅法详解写在前⾯：
在这次的项⽬中，没有再使⽤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 = Scheme();
String serverName = ServerName();
String contextPath = ContextPath();
int port = ServerPort();
//⽹站的访问跟路径
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 >Role</label>
<%--给⼀个class=“selectpicker” 改变下拉框的宽度⽤data-width --%>
<select id="sel_role" name="role" class="selectpicker" title="请选择" data-width="150px" >
</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博⽂中都有写过，并提及过。
看下效果图吧:
除了常⽤的单个下拉框外，还有最常见的就是下拉框级联了，这⾥也写个demo来记录⼀下，代码如下，也是只上前台jsp页⾯的代码，后台json数据的传递就不再说了。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String scheme = Scheme();
String serverName = ServerName();
String contextPath = ContextPath();
int port = ServerPort();
//⽹站的访问跟路径
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 >Biz Unit</label>
<select id="sel_bizUnit" name="bUnitId" class="selectpicker" title="请选择" data-width="150px" >
</select>
   
<label >Division</label>
<select id="sel_division" name="divId" class="selectpicker"title="请选择" data-width="150px" >
</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 ;
}
//如果⼀级有对应的⼆级则进⾏拼接
//每次拼接前都进⾏清空
jsp用什么前端框架
$("#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对应的⼆级。所以这个时候也应该清空⼀下。这些⼩细节可以按照⾃⼰的项⽬需求来。看下效果图：
如果⼤家还想深⼊学习，可以点击进⾏学习，再为⼤家附3个精彩的专题：
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。