how to display value in dropdown list depending on another dropdownlist using jsp?

Question

I'm tying to bind the value to dropdownlist ie named as subtype which is depending on another dropdownlist ie named as type . Please tell me how I can do that.. I have given I following code which implement for binding the dropdownlist depending on another dropdownlist.

  `<table>
  <tr>
  <td>
 <label id="type">Chosen category : </label>
 </td>
 <td>
 <% String getType=request.getParameter("id");
 out.println("<h4>"+getType+"  <a href='post free ads.jsp'>Change the
 category</a>   </h4>");
 %>
 </td>
 </tr>

 <tr>
 <td>
 <label id="typeselect">Select type : </label>
 </td>
 <td>
 <select name="type">  
     <option value="none">Select</option>  
  <%
  Connection conn = NewClass.getOracleConnection();
  Statement stmt = conn.createStatement();  
  ResultSet rs = stmt.executeQuery("Select distinct company from admin.all_stuff
   where stuff_type='"+getType+"' ");
  while(rs.next()){
      %>
      <option value="<%=rs.getString(1)%>"><%=rs.getString(1)%></option>
       <%
  }
 %>
  </select>
  </td>
 </tr>
 <tr>
 <td> <label id="subtypeselect">Select Subtype : </label></td>
 <td>
     <select name="subtype">  
  <option value="none">Select</option>  
     <%
  try
  { %>
 <% String typeselected = request.getParameter("type");
  Statement stmtmt = conn.createStatement();  
  ResultSet rse = stmtmt.executeQuery("Select model_no from admin.all_stuff
  where stuff_type='"+getType+"' and company='"+typeselected+"' ");
  while(rse.next()){
      %>
      <option value="<%=rse.getString(1)%>"><%=rse.getString(1)%></option> 
      <%
  }
  %>
  <% }
  catch(Exception e)
  {
      out.println(e.getMessage());
  }
  %>
  }
    </select> 
     
 </td>
  </tr>
    </table>`

Answer 1

You need AJAX for this to get it work.

Your jsp is compiled into a servlet and then delivered to your client. After that no more changes are possible.

You have to handle an onChange event on the first drop down box in HTML and then post an AJAX request to your server to send back the content for the second drop down box.

Answer 2

Easiest way to start with AJAX is to get some library for example jQuery

$.get('ajax/test.html', function(data) {
    alert(data);
});

This code allow us to download from HTML page some content from URL 'ajax/test.html'. Second argument is callback function. Variable data has content of page 'ajax/test.html'

More: http://api.jquery.com/jQuery.get/