DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jquery動態加載select下拉框示例代碼
jquery動態加載select下拉框示例代碼
編輯:JavaScript綜合知識     

 動態加載select下拉框的實現方法有很多,在接下來的文章中為大家介紹下jquery是如何實現的

如題,直接上代碼,實戰學習。  代碼如下: <head><title>jquery實現動態加載select下拉選項</title>  <script type="text/javascript">  function init(){  makemoduleSelect();  }  //加載模板下拉框選項  function makemoduleSelect(){  $.ajax({  url : 'indexStatisticsAction_getSelect.jsp',  data: { page:'clientindexStatistics.jsp',method:'get_modtitlecode'},  success : function(result){  $("#makemodule").append(result);  }  });  }</script>  </head>  <body onload="init()">  下拉框<select name="makemodule" id="makemodule" style='width:130px' onchange='makemoduleSelected()'>  <option> ------- </option>  </select></body>    以上html被加載時,由於body標簽裡面設置了onload屬性,則其對應的javascript函數會運行,最後到 function makemoduleSelect(),再來看看這個函數:    url屬性,類似於AJAX的跳轉url,這裡我用了同一個路徑下的jsp頁面(indexStatisticsAction_getSelect.jsp),下面會再展示;  data屬性,將作為請求的參數,由request獲取;  success屬性,表示該jquery的ajax請求成功返回後將執行的代碼,這裡的$("#makemodule")指的是下拉框。    下面是ajax請求的url所對應的jsp,這裡刪掉了JDBC相關的包,自行引入嘛,JDBC的就不多說了,根據需要把業務邏輯碼出來吧。  代碼如下: <%@ page import="java.util.*"%>  <%@ page import="java.sql.ResultSet"%>  <%@ page import="java.io.PrintWriter"%>  <%  String userId = (String) session.getAttribute("userid");  String method = request.getParameter("method");  String fromPage = request.getParameter("page");  String sql1 = "select modtitlename,modtitlecode from makemodule where userid = '?userId?' and modulename_en='?modulename_en?' group by modtitlename ";  System.out.println("---getting select_option from:"+fromPage+"----" + new Date());    //獲取模板選項  if(method.equals("get_modtitlecode")){  String sql = sql1.replace("?userId?",userId);  if(fromPage.equals("acindexStatistics.jsp")){  sql = sql.replace("?modulename_en?","acsta");  }else if(fromPage.equals("apindexStatistics.jsp")){  sql = sql.replace("?modulename_en?","apsta");  }else if(fromPage.equals("clientindexStatistics.jsp")){  sql = sql.replace("?modulename_en?","terminalsta");  }  System.out.println(sql);  StringBuffer rsOption = new StringBuffer();  Db db = new Db();  try {  db.prepareQuery();  ResultSet rs = db.executeQuery(sql);  while (rs!=null && rs.next()) {  rsOption.append("<option value='"+rs.getString("modtitlecode")+"'>"+StringOperator.ISO2GB(rs.getString("modtitlename"))+"</option>");  }  rs.close();  } catch (Exception e) {  e.printStackTrace();  } finally {  db.endQuery();  }  PrintWriter pout = response.getWriter();  pout.write(rsOption.toString());  pout.flush();  pout.close();  }  %>    上面的sql語句將取出兩個值,分別為select下拉框的顯示值和真值,套個<option>標簽回發就可以了。 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved