Home > Developer > JavaScript
Sample Code for jquery to dynamically load the select drop-down box
There are many implementation methods for dynamically loading the select drop-down box. In the following article, we will introduce how jquery is implemented.
Such as the question, directly go to the Code for practical learning.
The Code is as follows:
<Head> <title> jquery implements dynamic loading of select drop-down options </title>
<Script type = "text/javascript">
Function init (){
MakemoduleSelect ();
}
// Load the 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 ()">
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 run and then go to function makemoduleSelect (). Let's take a look at this function:
Url attribute, similar to AJAX jump url. Here I use the jsp page (indexStatisticsAction_getSelect.jsp) in the same path, which will be shown below;
The data attribute, which is used as the request parameter and obtained by the request;
The success attribute indicates the code to be executed after the jquery ajax request is successfully returned. $ ("# makemodule") here refers to the drop-down box.
The following is the jsp corresponding to the url of the ajax request. The JDBC-related package is deleted here. We will introduce the JDBC package on our own. We will not talk much about the JDBC code as needed.
The Code is as follows:
<% @ 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 ());
// Obtain 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.exe cuteQuery (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 preceding SQL statement extracts two values: the displayed value and the true value in the select drop-down box, and sets the <option> tag to be resend.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
