jquery動態載入select下拉框範例程式碼

最後更新：2018-01-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

如題，直接上代碼，實戰學習。

代碼如下:

<head><title>jquery實現動態載入select下拉選項</title>

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>

下拉框<select name="makemodule" id="makemodule" style='width:130px' onchange='makemoduleSelected()'>

</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>標籤回傳就可以了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More