jQuery實現(xiàn)動態(tài)加載select下拉列表項功能示例
本文實例講述了jQuery實現(xiàn)動態(tài)加載select下拉列表項功能。分享給大家供大家參考，具體如下：
需求說明：
以前使用的select下拉列表都是靜態(tài)的，select 的option數(shù)據(jù)都是寫死的。現(xiàn)在項目中的select需要根據(jù)不同的場景使用不同的數(shù)據(jù)，解決方式就是動態(tài)加載option數(shù)據(jù)。
代碼部分：
下面步驟介紹了如何從數(shù)據(jù)庫獲取數(shù)據(jù)，并動態(tài)的在前端顯示。
步驟一：jsp頁面靜態(tài)的select：
<div> <select id="selectSM"> <option>選擇A</option> <option>選擇B</option> <option>選擇C</option> </select> </div>
注意：
1、靜態(tài)的select在某些場景下使用是沒有問題的。但是在產(chǎn)品不同的需求時，動態(tài)select更能勝任其多樣性。
2、select有多種寫法，這里是最簡單的。
步驟二：jQuery通過ajax請求獲取動態(tài)的數(shù)據(jù)，并在jsp頁面顯示。
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'>請選擇</option>");//添加第一個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，其他方式也可以實現(xiàn)。
步驟三：后臺數(shù)據(jù)的處理。
public JSONObject getItemDepartList(HttpServletRequest request) throws Exception{
//查詢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;
}
注意：由于后臺返回數(shù)據(jù)的問題，需要對數(shù)據(jù)進(jìn)行截取并去除重復(fù)數(shù)據(jù)。如果沒有這個需求，可以直接向前端返回一個數(shù)組或list即可。下面是不同數(shù)據(jù)的控制臺輸出：
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查詢語句，這里是把不同字段的值進(jìn)行拼接，返回到controller中的list中。
SELECT GROUP_CONCAT(DISTINCT CONCAT(字段名稱)) AS 字段名稱或別名 FROM 表名
步驟五：這里捎帶說一下，如何獲取select下拉列表選擇的值
//select 的change事件用了獲取下拉列表的值
$(document).on("change","#selectSM",function(){
//獲取選擇的值
var condition = $(this).val();
//其他操作
});
總結(jié)：
不同的需求對應(yīng)著不同的數(shù)據(jù)處理和顯示方式。以及不同的代碼實現(xiàn)方式這里介紹我自己的觀點。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表單(form)操作技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
PHP+jQuery實現(xiàn)隨意拖動層并即時保存拖動位置
本文講解了如何采用PHP+MySQL+jQuery,實現(xiàn)隨意拖動層并即時保存拖動位置。 十分的實用，有需要的小伙伴可以參考下。2015-04-04
jQuery判斷元素是否顯示 是否隱藏的簡單實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query判斷元素是否顯示 是否隱藏的簡單實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jquery手機(jī)觸屏滑動拼音字母城市選擇器的實例代碼
下面小編就為大家分享一篇jquery手機(jī)觸屏滑動拼音字母城市選擇器的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
delegate()方法是為匹配元素的子元素添加一個或多個事件，并規(guī)定當(dāng)這些事件發(fā)生時運行的函數(shù)。下面就是詳細(xì)介紹，有需要的朋友可以來介紹一下。2016-10-10
jquery實現(xiàn)input輸入框?qū)崟r輸入觸發(fā)事件代碼
如何實現(xiàn)input輸入框?qū)崟r輸入觸發(fā)事件，下面有個不不錯的示例使用jquery實現(xiàn)的，感興趣的朋友可以參考下2014-01-01
jQuery實現(xiàn)頁面滾動時層智能浮動定位實例探討
在博客或者微博上面也會見到這個效果，所以客戶就也想要這樣的效果了，接下來為大家詳細(xì)介紹下浮動定位實現(xiàn)的過程，感興趣的朋友可以參考下哈2013-03-03
這篇文章主要向大家推薦了一個jquery無限級聯(lián)下拉菜單簡單實例演示，感興趣的小伙伴們可以參考一下2015-11-11
下面小編就為大家?guī)硪黄猨query二級目錄選中當(dāng)前頁的css樣式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
jQuery實現(xiàn)企業(yè)網(wǎng)站橫幅焦點圖切換功能實例
這篇文章主要介紹了jQuery實現(xiàn)企業(yè)網(wǎng)站橫幅焦點圖切換功能,實例分析了jQuery企業(yè)網(wǎng)站焦點圖的詳細(xì)實現(xiàn)方法,非常簡單實用,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了jquery實現(xiàn)平滑的二級下拉菜單效果,可實現(xiàn)鼠標(biāo)滑過彈出二級下拉菜單,涉及jquery鼠標(biāo)hover事件及fadeIn與fadeOut事件操作頁面元素隱藏及顯示的實現(xiàn)技巧,需要的朋友可以參考下2015-08-08