jQuery實(shí)現(xiàn)動(dòng)態(tài)加載select下拉列表項(xiàng)功能示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)動(dòng)態(tài)加載select下拉列表項(xiàng)功能。分享給大家供大家參考,具體如下:
需求說(shuō)明:
以前使用的select下拉列表都是靜態(tài)的,select 的option數(shù)據(jù)都是寫(xiě)死的?,F(xiàn)在項(xiàng)目中的select需要根據(jù)不同的場(chǎng)景使用不同的數(shù)據(jù),解決方式就是動(dòng)態(tài)加載option數(shù)據(jù)。
代碼部分:
下面步驟介紹了如何從數(shù)據(jù)庫(kù)獲取數(shù)據(jù),并動(dòng)態(tài)的在前端顯示。
步驟一:jsp頁(yè)面靜態(tài)的select:
<div> <select id="selectSM"> <option>選擇A</option> <option>選擇B</option> <option>選擇C</option> </select> </div>
注意:
1、靜態(tài)的select在某些場(chǎng)景下使用是沒(méi)有問(wèn)題的。但是在產(chǎn)品不同的需求時(shí),動(dòng)態(tài)select更能勝任其多樣性。
2、select有多種寫(xiě)法,這里是最簡(jiǎn)單的。
步驟二:jQuery通過(guò)ajax請(qǐng)求獲取動(dòng)態(tài)的數(shù)據(jù),并在jsp頁(yè)面顯示。
function IninDepart(){
$("#selectSM").remove();//清空select列表數(shù)據(jù)
var state = 1;
$.ajax({
type : "POST",
url : "<%=basePath%>/getItemDepartList.do",
dataType : "JSON",
data : {},
success : function(msg)
{
$("#selectSM").prepend("<option value='0'>請(qǐng)選擇</option>");//添加第一個(gè)option值
for (var i = 0; i < msg.rows.length; i++) {
//如果在select中傳遞其他參數(shù),可以在option 的value屬性中添加參數(shù)
//$("#selectSM").append("<option value='"+msg.rows[i].id+"'>"+msg.rows[i]+"</option>");
$("#selectSM").append("<option>"+msg.rows[i]+"</option>");
}
},error:function(){
alertLayer("獲取數(shù)據(jù)失敗","error");
}
});
}
注意:這里使用的是jQuery、ajax,其他方式也可以實(shí)現(xiàn)。
步驟三:后臺(tái)數(shù)據(jù)的處理。
public JSONObject getItemDepartList(HttpServletRequest request) throws Exception{
//查詢(xún)select數(shù)據(jù)
List<Map<String, Object>> list = appServices.getAppList();
System.out.println("list::::::::" + list);
//獲取數(shù)據(jù)存放到數(shù)組
String[] depart = null;
for (Map<String, Object> map : list) {
for (String k : map.keySet()) {
depart = ((String) map.get(k)).split(",");
System.out.println("depart::::::::" + depart);
}
}
//去除數(shù)組中重復(fù)數(shù)據(jù),存放到list
List<String> strList = new ArrayList<String>();
for (int i=0; i<depart.length; i++) {
if(!strList.contains(depart[i])) {
strList.add(depart[i]);
}
}
System.out.println("strList::::::::" + strList);
jsonObject.put("rows", strList);
return jsonObject;
}
注意:由于后臺(tái)返回?cái)?shù)據(jù)的問(wèn)題,需要對(duì)數(shù)據(jù)進(jìn)行截取并去除重復(fù)數(shù)據(jù)。如果沒(méi)有這個(gè)需求,可以直接向前端返回一個(gè)數(shù)組或list即可。下面是不同數(shù)據(jù)的控制臺(tái)輸出:
list::::::::[{service_depart=A,B,C,D,E,A,C,D,D,E}]
depart::::::::[Ljava.lang.String;@41fc702b
strList::::::::[A, B, C, D, E]
步驟四:sql查詢(xún)語(yǔ)句,這里是把不同字段的值進(jìn)行拼接,返回到controller中的list中。
SELECT GROUP_CONCAT(DISTINCT CONCAT(字段名稱(chēng))) AS 字段名稱(chēng)或別名 FROM 表名
步驟五:這里捎帶說(shuō)一下,如何獲取select下拉列表選擇的值
//select 的change事件用了獲取下拉列表的值
$(document).on("change","#selectSM",function(){
//獲取選擇的值
var condition = $(this).val();
//其他操作
});
總結(jié):
不同的需求對(duì)應(yīng)著不同的數(shù)據(jù)處理和顯示方式。以及不同的代碼實(shí)現(xiàn)方式這里介紹我自己的觀點(diǎn)。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery表單(form)操作技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)動(dòng)態(tài)顯示select下拉列表數(shù)據(jù)的方法
- jQuery實(shí)現(xiàn)列表內(nèi)容的動(dòng)態(tài)載入特效
- 基于jQuery和Bootstrap框架實(shí)現(xiàn)仿知乎前端動(dòng)態(tài)列表效果
- jQuery動(dòng)態(tài)產(chǎn)生select option下拉列表
- jQuery簡(jiǎn)單實(shí)現(xiàn)向列表動(dòng)態(tài)添加新元素的方法示例
- jQuery實(shí)現(xiàn)動(dòng)態(tài)生成年月日級(jí)聯(lián)下拉列表示例
- 如何使用Jquery動(dòng)態(tài)生成二級(jí)選項(xiàng)列表
- jQuery列表動(dòng)態(tài)增加和刪除的實(shí)現(xiàn)方法
相關(guān)文章
PHP+jQuery實(shí)現(xiàn)隨意拖動(dòng)層并即時(shí)保存拖動(dòng)位置
本文講解了如何采用PHP+MySQL+jQuery,實(shí)現(xiàn)隨意拖動(dòng)層并即時(shí)保存拖動(dòng)位置。 十分的實(shí)用,有需要的小伙伴可以參考下。2015-04-04
jQuery判斷元素是否顯示 是否隱藏的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jQuery判斷元素是否顯示 是否隱藏的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jquery手機(jī)觸屏滑動(dòng)拼音字母城市選擇器的實(shí)例代碼
下面小編就為大家分享一篇jquery手機(jī)觸屏滑動(dòng)拼音字母城市選擇器的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
jquery實(shí)現(xiàn)input輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
如何實(shí)現(xiàn)input輸入框?qū)崟r(shí)輸入觸發(fā)事件,下面有個(gè)不不錯(cuò)的示例使用jquery實(shí)現(xiàn)的,感興趣的朋友可以參考下2014-01-01
jQuery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)層智能浮動(dòng)定位實(shí)例探討
在博客或者微博上面也會(huì)見(jiàn)到這個(gè)效果,所以客戶(hù)就也想要這樣的效果了,接下來(lái)為大家詳細(xì)介紹下浮動(dòng)定位實(shí)現(xiàn)的過(guò)程,感興趣的朋友可以參考下哈2013-03-03
jquery無(wú)限級(jí)聯(lián)下拉菜單簡(jiǎn)單實(shí)例演示
這篇文章主要向大家推薦了一個(gè)jquery無(wú)限級(jí)聯(lián)下拉菜單簡(jiǎn)單實(shí)例演示,感興趣的小伙伴們可以參考一下2015-11-11
jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式
下面小編就為大家?guī)?lái)一篇jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
jQuery實(shí)現(xiàn)企業(yè)網(wǎng)站橫幅焦點(diǎn)圖切換功能實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)企業(yè)網(wǎng)站橫幅焦點(diǎn)圖切換功能,實(shí)例分析了jQuery企業(yè)網(wǎng)站焦點(diǎn)圖的詳細(xì)實(shí)現(xiàn)方法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-04-04
jquery實(shí)現(xiàn)平滑的二級(jí)下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)平滑的二級(jí)下拉菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)彈出二級(jí)下拉菜單,涉及jquery鼠標(biāo)hover事件及fadeIn與fadeOut事件操作頁(yè)面元素隱藏及顯示的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08

