AJAX

Index.jsp

<form  name="employee" action="reg_employee.do" method="POST"  >

<span>Country :</span> <select name='country' id='country' onchange="showState(this.value)" style="width: 150px;margin-left: 145px"  > 

                                    <option>Select</option> 

                                    <%

                                        DbConnection dbc = new DbConnection();

                                        Connection con=dbc.getCon();

                                        Statement stmt = con.createStatement(); 

                                        ResultSet rs = stmt.executeQuery("select distinct country from tbl_locations ORDER BY country ASC");

                                        while(rs.next()){

                                            %>

                                            <option value="<%=rs.getString(1)%>"><%=rs.getString(1)%></option> 

                                            <%

                                        }

                                            %>

                                    </select> 

                                    <br/>  <br />

                            <span>State :</span>

                            <span id='state'> 

                                <select id="state1" name='state' style="width: 150px;margin-left: 165px" >

                                   <option>Select</option>

                                  

                                </select> 

                            </span><br /><br />

                            <span>City :</span>

                                <span id='city'> 

                                    <select id="city1" name='city' style="width: 150px;margin-left: 176px"  > 

                                        <option>Select</option>

                                       

                                    </select> 

                                </span><br /><br />

</form>

Javascript

<script language="javascript" type="text/javascript"> 

      var xmlHttp 

      var xmlHttp

      function showState(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="state.jsp";

      url +="?country=" +str;

      xmlHttp.onreadystatechange = stateChange;

      xmlHttp.open("GET", url, true);

      xmlHttp.send(null);

      }

      function stateChange(){  

      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){  

      document.getElementById("state").innerHTML=xmlHttp.responseText  

      }  

      }

      function showCity(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="city.jsp";

      url +="?state=" +str;

      xmlHttp.onreadystatechange = stateChange1;

      xmlHttp.open("GET", url, true);

      xmlHttp.send(null);

      }

      function stateChange1(){  

      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){  

      document.getElementById("city").innerHTML=xmlHttp.responseText  

      }  

      }

      </script>  

State.jsp

<%@page import="model.DbConnection"%>

<%@page import="java.sql.*"%>

<%

String country=request.getParameter("country"); 

String buffer="";

buffer="<select name='state' id='state1' onchange='showCity(this.value);' class='state' ><option>Select</option>"; 

try{

     DbConnection dbc = new DbConnection();

     Connection con=dbc.getCon();

 Statement stmt = con.createStatement(); 

 ResultSet rs = stmt.executeQuery("Select distinct state from tbl_locations where country='"+country+"' ORDER BY state ASC"); 

   while(rs.next()){

   buffer=buffer+"<option value='"+rs.getString(1)+"'>"+rs.getString(1)+"</option>"; 

   } 

 buffer=buffer+"</select>"; 

 response.getWriter().println(buffer);

 }

 catch(Exception e){

     System.out.println(e);

 }

 %>

City.jsp

<%@page import="model.DbConnection"%>

<%@page import="java.sql.*"%>

<%

String state=request.getParameter("state");  
String buffer="";

buffer="<select name='city' id='city1' class='city' ><option>Select</option>"; 

try{

DbConnection dbc = new DbConnection();

Connection con=dbc.getCon();

 Statement stmt = con.createStatement(); 

 ResultSet rs = stmt.executeQuery("Select distinct city from tbl_locations  where state='"+state+"' ORDER BY city ASC"); 

   while(rs.next()){

   buffer=buffer+"<option value='"+rs.getString(1)+"'>"+rs.getString(1)+"</option>"; 

   } 

 buffer=buffer+"</select>"; 

 response.getWriter().println(buffer);

 }

 catch(Exception e){

     System.out.println(e);

 }

 %>