select from a dropdown list based on selection from another dropdown list in jsp

Question

I have two dropdown, one with all account ids and one with corresponding email ids. if I select one entry from account id, corresponding email-id should be selected automatically in the other dropdown. (account id and email-ids are one to one relation ship. first accound id corresponds to first email id etc.) how can we do that in JSP ?

see my dropdowns here:

<td>
 1. Member Account Number
     <span class="bodyCopy">
      <font color="#ff0000"> * </font>
     </span>: 
    <html:select name="DataForm" 
                 property="Member.accountNumber"  
                 styleClass="formContent" 
             style="width:80px"> 

      <html:options collection="<%= WorkConstants.RENewDropdowns.PACCT %>" 
                        property="value" 
                        labelProperty="label" 
                        styleClass="formContent"/>
    </html:select>
</td>

email-ids are here:

<td>
 3. Member <br>E-mail Address:<br />
  <span class="bodyCopy"></span> 

  <html:select  name="DataForm" 
                property="Member.emailAddress.emailAddress" 
                style = "width:150px" 
                styleClass="formContent"> 

     <html:options collection="<%= WorkConstants.RENewDropdowns.PEMAIL %>" 
                       property="value" 
                       labelProperty="label" 
                       styleClass="formContent"/>
</html:select>
</td>

score 1 · Answer 1 · answered Feb 16 '11 at 03:40

There are a lot of ways to do that. The basic idea is using javascript (or jQuery or any other AJAX framework) to change the form's action to "comboUpdate" or something and submit that form. The action will only load the second combo and forward to the same page.

score 1 · Answer 2 · answered Feb 13 '12 at 07:26

Hi use Ajax for retrieving values from database using select box, this might help you

1.mainpage.jsp

<%@page import="java.sql.*"%>
  <html>
  <head>  
  <script language="javascript" type="text/javascript">  
 //AJAX code for retrieving dates from database
  var xmlHttp;  
  var xmlHttp;
  function showEmp(str){
  if (typeof XMLHttpRequest != "undefined"){
  xmlHttp= new XMLHttpRequest();
  }
  else if (window.ActiveXObject){
  xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (xmlHttp==null){
  alert("Browser does not support XMLHTTP Request");
  return;
  } 
  var url="selEmp.jsp";
  url +="?count=" +str;
  xmlHttp.onreadystatechange = stateChange;
  xmlHttp.open("GET", url, true);
  xmlHttp.send(null);
  }
 function stateChange()
   {   
  if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {   
  document.getElementById("batchdate").innerHTML=xmlHttp.responseText   
   }   
   }

  </script>  
  </head>  
  <body>  
  <select name='batch' onchange="showEmp(this.value)">  
   <option value="none">Select</option>  
  <%
 Class.forName("com.mysql.jdbc.Driver").newInstance();  
 Connection con = DriverManager.getConnection("jdbc:mysql://192.168.40.120:3306/cjet","root","root");  
 Statement stmt = con.createStatement();  
 ResultSet rs = stmt.executeQuery("Select * from cjet.batch");
 while(rs.next()){
 %>
  <option value="<%=rs.getString("bname")%>"><%=rs.getString("bname")%></option>  
  <%
 }
 %>
  </select>  
  <br>  
  <div id='batchdate'>  
  <select name='batchdate' onchange="showCustomer(this.value)">  
  <option value='-1'></option>  
  </select>  
  </div> 
  </body> 
  </html>

2.retrieve.jsp

<%@page import="java.sql.*"%>
<%
String no=request.getParameter("count");  
String buffer="<select name='batchdate' onchange='showCustomer(this.value)'><option    value='-1'>Select</option>";  
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();  
Connection con = DriverManager.getConnection("jdbc:mysql://192.168.40.144:3306/cjet","root","root");  
Statement stmt = con.createStatement();  
ResultSet rs = stmt.executeQuery("Select * from cjet.batchdate where bname='"+no+"' ");  
while(rs.next()){
buffer=buffer+"<option value='"+rs.getString(1)+"'>"+rs.getString("courseID")+" </option>";  
}                                
buffer=buffer+"</select>";  
response.getWriter().println(buffer); 
}
catch(Exception e)
{
 System.out.println(e);
}
%>

select from a dropdown list based on selection from another dropdown list in jsp

2 Answers2