title: Populate a dropdown list based on the selection of previous dropdown list using ajax
body: <p>Hi,I have a JSP page with a form containing two drop-down list,</p>
  
  <ol>
  <li>the first for showing the country name and </li>
  <li>the second for showing the states under the corresponding country.</li>
  </ol>
  
  <p>I have a Mysql database contain two tables country and state respectively.</p>
  
  <p><strong>WHAT I WANT:</strong></p>
  
  <p>I need to populate the second drop-down from the database using Ajax where the data from the database must be converted to Json object and give response as Json object.Then populate the second drop-down's based on this response Json object.</p>
  
  <p><strong>ISSUE I'M FACING:</strong></p>
  
  <p>My problem is that when i select a value in the first drop-down list the second drop-down list is populated with the value '[object Object],[object Object],[object Object]' instead of showing the corresponding state names.</p>
  
  <p>Somebody please help me to solve this problem.Here is my code that i have done so far</p>
  
  <p><strong>index.jsp:</strong></p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"      
  "http://www.w3.org /TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;AJAX calls to Servlet using JQuery and JSON&lt;/title&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() {
      $('#country').change(function(event) {  
      var $country=$("select#country").val();
         $.get('ActionServlet',{countryname:$country},function(responseJson) {   
             var $select = $('#states');                           
             $select.find('option').remove(); 
  
             $.each(responseJson, function(index, name) {               
                 $('&lt;option&gt;').val(index).text(name).appendTo($select);      
                  });
          });
      });
  });          
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;AJAX calls to Servlet using JQuery and JSON&lt;/h1&gt;
  Select Country:
  &lt;select id="country"&gt;
  &lt;option selected="selected"&gt;Select Country&lt;/option&gt;
  &lt;option value="1"&gt;India&lt;/option&gt;
  &lt;option value="2"&gt;china&lt;/option&gt;
  &lt;/select&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  Select State:
  &lt;select id="states"&gt;
  &lt;option selected="selected"&gt;Select State&lt;/option&gt;
  &lt;/select&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>ActionServlet.java:</strong></p>
  
  <pre><code>package ajaxdemo;
  
  import java.io.IOException;
  import java.sql.*;
  import java.util.*;
  
  import javax.servlet.ServletException;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  
  import net.sf.json.JSONArray;
  import net.sf.json.JSONObject;
  
  import com.google.gson.Gson;
  
  
  public class ActionServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;
  
  
  public ActionServlet() {
      // TODO Auto-generated constructor stub
  }
  
  
  protected void doGet(HttpServletRequest request,  
      HttpServletResponse response) throws ServletException, IOException {
  
      JSONArray cellarray = new JSONArray();
      JSONObject cellobj = null; //new JSONObject();
      JSONObject jo=new JSONObject();
      String country=request.getParameter("countryname");  
      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 state 
                  where countryid='"+country+"'  ");  
          while(rs.next()){
              cellobj = new JSONObject();
              cellobj.put("id", rs.getString(1));
              cellobj.put("name", rs.getString(3));
              cellarray.add(cellobj);
          }  
          jo.put("arrayName",cellarray);
          response.setContentType("application/json");
          response.setCharacterEncoding("UTF-8");
          response.getWriter().write(jo.toString());
      }
      catch(Exception e){
       System.out.println(e);
      }
  
  
  
  }
  
  
  protected void doPost(HttpServletRequest request, 
      HttpServletResponse response) throws ServletException, IOException {
      // TODO Auto-generated method stub
  
  }
  
   }
  </code></pre>
  
  <p>Thanks in advance</p>