今天就跟大家聊聊有關(guān)使用jQuery怎么動(dòng)態(tài)加載select下拉列表項(xiàng)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)建站專(zhuān)注于漢壽網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供漢壽營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，漢壽網(wǎng)站制作、漢壽網(wǎng)頁(yè)設(shè)計(jì)、漢壽網(wǎng)站官網(wǎng)定制、小程序設(shè)計(jì)服務(wù)，打造漢壽網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供漢壽網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

jquery是什么

jquery是一個(gè)簡(jiǎn)潔而快速的JavaScript庫(kù)，它具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)，能夠用于簡(jiǎn)化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫(huà)，以便快速開(kāi)發(fā)網(wǎng)站。

需求說(shuō)明：

以前使用的select下拉列表都是靜態(tài)的，select 的option數(shù)據(jù)都是寫(xiě)死的。現(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：

 
  選擇A
  選擇B
  選擇C
 

注意：

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("請(qǐng)選擇");//添加第一個(gè)option值
  for (var i = 0; i < msg.rows.length; i++) {
  //如果在select中傳遞其他參數(shù)，可以在option 的value屬性中添加參數(shù)
  //$("#selectSM").append(""+msg.rows[i]+"");
  $("#selectSM").append(""+msg.rows[i]+"");
 }
 },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> list = appServices.getAppList();
 System.out.println("list::::::::" + list);
 //獲取數(shù)據(jù)存放到數(shù)組
 String[] depart = null;
 for (Map map : list) {
  for (String k : map.keySet()) {
   depart = ((String) map.get(k)).split(",");
   System.out.println("depart::::::::" + depart);
  }
 }
 //去除數(shù)組中重復(fù)數(shù)據(jù)，存放到list
 List strList = new ArrayList();
 for (int i=0; i
注意：由于后臺(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();
  //其他操作
});
看完上述內(nèi)容，你們對(duì)使用jQuery怎么動(dòng)態(tài)加載select下拉列表項(xiàng)有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
            
            
                        

            當(dāng)前標(biāo)題：使用jQuery怎么動(dòng)態(tài)加載select下拉列表項(xiàng)            

            分享網(wǎng)址：http://weahome.cn/article/ggeejh.html