dynamic drop down

I have created 2 drop downs in jsp.1 for department and other for its related designation.that means if I select a department, the page should refresh quickly but keep all the correct info and then depending on the selected department, respective designation should dynamically bind into the designation drop down (use jsp+javascript+servlet) reply soon

View Answers

August 24, 2011 at 1:49 PM

1)dept.jsp:

 <%@page import="java.sql.*"%>
 <html>
      <head>  
      <script language="javascript" type="text/javascript">  
      var xmlHttp  
      var xmlHttp
      function showDesig(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="desig.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("des").innerHTML=xmlHttp.responseText   
      }   
      }
      </script>  
      </head>  
      <body>  
      <select onchange="showDesig(this.value)">  
       <option value="none">Select</option>  
    <%
 Class.forName("com.mysql.jdbc.Driver").newInstance();  
 Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root");  
 Statement stmt = con.createStatement();  
 ResultSet rs = stmt.executeQuery("Select * from dept");
 while(rs.next()){
     %>
      <option value="<%=rs.getString("DEPT_NO")%>"><%=rs.getString("DEPT_NAME")%></option>  
      <%
       }
     %>
      </select>  
      <br>  
      <div id='des'>  
      <select name='des' >  
      <option value='-1'></option>  
      </select>  
      </div>  
      </body> 
      </html>

2)desig.jsp:

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

For the above code, create tables dept and designation:

CREATE TABLE `dept` (                           
          `DEPT_NO` varchar(100) NOT NULL default '0',  
          `DEPT_NAME` varchar(255) default NULL,        
          PRIMARY KEY  (`DEPT_NO`)                      
        )

CREATE TABLE `designation` (                              
               `ID` bigint(255) NOT NULL auto_increment,               
               `DEPT_NO` int(255) default NULL,                        
               `DESIGNATION` varchar(255) default NULL,                
               PRIMARY KEY  (`ID`)                                     
             )