您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關使用jQuery怎么動態(tài)加載select下拉列表項,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
jquery是一個簡潔而快速的JavaScript庫,它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫,以便快速開發(fā)網(wǎng)站。
需求說明:
以前使用的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ù)組中重復數(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ù)進行截取并去除重復數(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查詢語句,這里是把不同字段的值進行拼接,返回到controller中的list中。
SELECT GROUP_CONCAT(DISTINCT CONCAT(字段名稱)) AS 字段名稱或別名 FROM 表名
步驟五:這里捎帶說一下,如何獲取select下拉列表選擇的值
//select 的change事件用了獲取下拉列表的值 $(document).on("change","#selectSM",function(){ //獲取選擇的值 var condition = $(this).val(); //其他操作 });
看完上述內(nèi)容,你們對使用jQuery怎么動態(tài)加載select下拉列表項有進一步的了解嗎?如果還想了解更多知識或者相關內(nèi)容,請關注億速云行業(yè)資訊頻道,感謝大家的支持。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。