Jquery dynamically loads the select drop down box sample code
- 2020-03-30 00:50:26
- OfStack
For example, direct on the code, practical learning.
When the above HTML is loaded, because the onload attribute is set in the body tag, the corresponding javascript function will be run. Finally, function makemoduleSelect(), and then look at this function:
The url property, which is similar to the AJAX jump url, is the JSP page under the same path (indexstatisticsaction_getselection.jsp), shown below.
Data attribute, which will be taken as the parameter of the request, is obtained by the request;
The success attribute, which represents the code to be executed after the successful return of this jquery ajax request, where $("#makemodule") refers to the drop-down box.
The following is the url of the ajax request corresponding to the JSP, here deleted JDBC related package, the introduction of their own, JDBC is not much to say, according to the needs of the business logic code out.
The above SQL statement will fetch two values, the display value and the truth value of the select drop-down box, set < Option> Just post back the label.
<head><title>jquery Dynamic loading select The drop-down options </title>
<script type="text/javascript">
function init(){
makemoduleSelect();
}
//Load template drop-down box option
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()">
A drop-down box <select name="makemodule" id="makemodule" style='width:130px' onchange='makemoduleSelected()'>
<option> ------- </option>
</select></body>
When the above HTML is loaded, because the onload attribute is set in the body tag, the corresponding javascript function will be run. Finally, function makemoduleSelect(), and then look at this function:
The url property, which is similar to the AJAX jump url, is the JSP page under the same path (indexstatisticsaction_getselection.jsp), shown below.
Data attribute, which will be taken as the parameter of the request, is obtained by the request;
The success attribute, which represents the code to be executed after the successful return of this jquery ajax request, where $("#makemodule") refers to the drop-down box.
The following is the url of the ajax request corresponding to the JSP, here deleted JDBC related package, the introduction of their own, JDBC is not much to say, according to the needs of the business logic code out.
<%@ 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());
//Get template options
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();
}
%>
The above SQL statement will fetch two values, the display value and the truth value of the select drop-down box, set < Option> Just post back the label.