基于Bootstrap下拉框插件bootstrap-select使用方法詳解
寫(xiě)在前面：
在這次的項(xiàng)目中，沒(méi)有再使用liger-ui做為前端框架了，改為了Bootstrap,這次也好接觸下新的技術(shù)，在學(xué)習(xí)的過(guò)程中發(fā)現(xiàn)，Bootstrap的一些組件基本都是采用class的形式，就是給一個(gè)它定義好的樣式，就會(huì)給你展現(xiàn)出一個(gè)好看的組件出來(lái)，這個(gè)比liger-ui的界面做的要好，但是了解了Boostrap的基本語(yǔ)法后，發(fā)現(xiàn)在官方的文檔中，并沒(méi)有一些可以動(dòng)態(tài)加載組件的demo,因?yàn)橹坝玫膌iger-ui，大多數(shù)組件都只需要寫(xiě)一行代碼，就能很好的，并且很方便的直接與后臺(tái)進(jìn)行交互，并動(dòng)態(tài)加載數(shù)據(jù)。但是bootstrap的文檔中并沒(méi)有這樣的例子。畢竟它就是做靜態(tài)的，只需要給一個(gè)樣式，那我動(dòng)態(tài)加載數(shù)據(jù)怎么辦？全部自己封裝嗎？后面查閱資料發(fā)現(xiàn)，有許多常用的組件插件是基于bootstrap來(lái)進(jìn)行封裝的，這就需要我們?nèi)绻褂檬裁唇M件，可以單獨(dú)的再去下載它的插件。這個(gè)時(shí)候，就可以做到很方便的像后臺(tái)發(fā)送數(shù)據(jù)進(jìn)行動(dòng)態(tài)加載了。這里就記錄下，一些常用的bootstrap的組件插件吧，首先是下拉框。
基于Bootstrap的下拉框也有好幾個(gè)，這里我選擇了bootstrap-select.js.下面就簡(jiǎn)單的記錄下它的用法吧，主要是動(dòng)態(tài)的加載數(shù)據(jù)。
首先還是上代碼，畢竟代碼最直觀。
前臺(tái)jsp頁(yè)面：
<%@ 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();
//網(wǎng)站的訪問(wèn)跟路徑
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測(cè)試</title>
<%--導(dǎo)入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" />
<%--先導(dǎo)入jqury插件--%>
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
<%--導(dǎo)入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>
<%--給一個(gè)class=“selectpicker” 改變下拉框的寬度用data-width --%>
<select id="sel_role" name="role" class="selectpicker" title="請(qǐng)選擇" data-width="150px" style="">
</select>
</body>
<script>
$(function(){
//初始化下拉框
//動(dòng)態(tài)加載
$.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>");
}
//這一步不要忘記 不然下拉框沒(méi)有數(shù)據(jù)
$("#sel_role").selectpicker("refresh");
}
});
});
</script>
</html>
首先要導(dǎo)入相關(guān)的樣式以及js插件，由于bootstrap是基于jquery的，故要先導(dǎo)入jquery插件，然后bootstrap-select又是基于bootstrap的。故先導(dǎo)入bootstrap，再導(dǎo)入bootstrap-select.這里要注意下導(dǎo)入的順序呢。
對(duì)于動(dòng)態(tài)的加載數(shù)據(jù)，還是要自己進(jìn)行拼接，然后refresh一下，這個(gè)一定不能忘記，不然不會(huì)出來(lái)數(shù)據(jù)。由于此次的后臺(tái)還是ssh框架，故后臺(tái)查詢下拉框的數(shù)據(jù)，并如何返回json給前臺(tái)頁(yè)面，這里就不再詳細(xì)的說(shuō)了，之前在ligerui博文中都有寫(xiě)過(guò)，并提及過(guò)。
看下效果圖吧:
除了常用的單個(gè)下拉框外，還有最常見(jiàn)的就是下拉框級(jí)聯(lián)了，這里也寫(xiě)個(gè)demo來(lái)記錄一下，代碼如下，也是只上前臺(tái)jsp頁(yè)面的代碼，后臺(tái)json數(shù)據(jù)的傳遞就不再說(shuō)了。
<%@ 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();
//網(wǎng)站的訪問(wèn)跟路徑
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測(cè)試</title>
<%--導(dǎo)入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" />
<%--先導(dǎo)入jqury插件--%>
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
<%--導(dǎo)入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="請(qǐng)選擇" 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="請(qǐng)選擇" data-width="150px" style="">
</select>
</body>
<script>
$(function(){
//初始化下一級(jí)下拉框
//動(dòng)態(tài)加載
$.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");
}
});
//二級(jí)下拉框的選項(xiàng)隨一級(jí)下拉框的值而改變
$("#sel_bizUnit").change(function(){
//根據(jù)bUnit去獲取Division
$.ajax({
type: 'get',
url: '${baseURL}/getSADivisionByBUnit?bUnitId='+$("#sel_bizUnit").val(),
dataType: "json",
success: function (data) {
if(data.length == 0){
//如果一級(jí)沒(méi)有對(duì)應(yīng)的二級(jí) 則清空二級(jí)并 不往下執(zhí)行
$("#sel_division").empty();
$("#sel_division").selectpicker("refresh");
return ;
}
//如果一級(jí)有對(duì)應(yīng)的二級(jí) 則進(jìn)行拼接
//每次拼接前都進(jìn)行清空
$("#sel_division").empty();
for(var i=0;i<data.length;i++){
$("#sel_division").append("<option value='"+data[i].divId+"'>"+data[i].divName+"</option>");
}
//這里千萬(wàn)別忘記了
$("#sel_division").selectpicker("refresh");
}
});
});
});
</script>
</html>
代碼都比較簡(jiǎn)單，基本看下就會(huì)了，也就是根據(jù)一級(jí)下拉框的值去查詢獲取對(duì)應(yīng)的二級(jí)下拉框的值，然后拼接加載出來(lái)就完事了。值得注意的點(diǎn)，當(dāng)一級(jí)沒(méi)有對(duì)應(yīng)的二級(jí)時(shí)，此時(shí)也應(yīng)該將二級(jí)清空并refresh一下，不然當(dāng)?shù)谝淮喂催x一級(jí)a，對(duì)應(yīng)有二級(jí)，接著再次選擇一級(jí)b，沒(méi)有對(duì)應(yīng)的二級(jí)時(shí)，還是會(huì)顯示出一級(jí)a對(duì)應(yīng)的二級(jí)。所以這個(gè)時(shí)候也應(yīng)該清空一下。這些小細(xì)節(jié)可以按照自己的項(xiàng)目需求來(lái)?？聪滦Ч麍D：
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展
- Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
- Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
- Bootstrap框架下下拉框select搜索功能
- bootstrap datetimepicker實(shí)現(xiàn)秒鐘選擇下拉框
- bootstrap suggest下拉框使用詳解
- Bootstrap select實(shí)現(xiàn)下拉框多選效果
- 基于BootStrap multiselect.js實(shí)現(xiàn)的下拉框聯(lián)動(dòng)效果
- 基于bootstrap實(shí)現(xiàn)多個(gè)下拉框同時(shí)搜索功能
- Bootstrap組合上、下拉框簡(jiǎn)單實(shí)現(xiàn)代碼
相關(guān)文章
使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)秒表功能（含開(kāi)始、暫停、繼續(xù)、重置功能）
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)秒表（含開(kāi)始、暫停、繼續(xù)、重置功能）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
JS簡(jiǎn)單循環(huán)遍歷json數(shù)組的方法
這篇文章主要介紹了JS簡(jiǎn)單循環(huán)遍歷json數(shù)組的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了JavaScript循環(huán)遍歷json數(shù)組的方法,并提供了jQuery遍歷json的方法,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了JS實(shí)現(xiàn)霓虹燈文字效果的方法,涉及javascript遍歷字符串及頁(yè)面樣式的動(dòng)態(tài)操作技巧,效果非常炫目華麗,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
cnblogs 代碼高亮顯示后的代碼復(fù)制問(wèn)題解決實(shí)現(xiàn)代碼
cnblogs是比較有名的技術(shù)博客基地，很多技術(shù)達(dá)人都在里面發(fā)布技術(shù)文章， 不過(guò)由于代碼不利于復(fù)制，因?yàn)轫?yè)面里面有pre標(biāo)簽等問(wèn)題2011-12-12
JS簡(jiǎn)單實(shí)現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)數(shù)組去重的方法,結(jié)合具體實(shí)例形式分析了javascript數(shù)組遍歷、判斷實(shí)現(xiàn)去重復(fù)的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-10-10
js判斷為空Null與字符串為空簡(jiǎn)寫(xiě)方法
最近開(kāi)始研究JavaScript的簡(jiǎn)寫(xiě)方法，下面就是有關(guān)判斷為空的簡(jiǎn)寫(xiě)方法2014-02-02
javascript獲取指定區(qū)間范圍隨機(jī)數(shù)的方法
下面小編就為大家?guī)?lái)一篇javascript獲取指定區(qū)間范圍隨機(jī)數(shù)的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
利用JS來(lái)控制鍵盤(pán)的上下左右鍵(示例代碼)
這篇文章主要介紹了利用JS來(lái)控制鍵盤(pán)的上下左右鍵示例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
JS,Jquery獲取select,dropdownlist,checkbox下拉列表框的值(示例代碼)
本篇文章主要是對(duì)JS,Jquery獲取select,dropdownlist,checkbox下拉列表框的值(示例代碼)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹(shù)添加/刪除節(jié)點(diǎn)操作示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹(shù)添加/刪除節(jié)點(diǎn)操作,涉及javascript二叉樹(shù)的定義、節(jié)點(diǎn)添加、刪除、遍歷等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03