How do I fill a dropdown with values returned by servlet using AJAX

Question

Okay, So I have the countries and their respective cities in a database table. And two dropdowns country and city. The options for cities will appear after user selects a country.

I am using AJAX for recieving cities based on country selected.

Here is the code:

 $(function(){

             $('#aicount').on( 'change', function () {        //#aicount: Contry dropdown , #aicity:City dropdown
                 var e= document.getElementById("aicount");

                    $.ajax( {
                          url: 'ReturnCity',                 // URL of Servlet
                         method:'post',
                          data:
                          {
                             country: e.options[e.selectedIndex].text

                           },     // parameters to Servlet
                          dataType: 'json',            

                          success: function ( res ) {

                                   //Don't know what to do here.

                          }
                       });
             });

         });

I am sending the selected country to a servlet which return the cities. The servlet code is:

String country=request.getParameter("country");
        JSONObject json=new JSONObject();
        try
        {
            Class.forName("com.mysql.jdbc.Driver");
            Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/db",user,pass);
            PreparedStatement ps=con.prepareStatement("select Name from city where countc=(select cid from country where name=?);");
            ps.setString(1, country);
            ResultSet rs=ps.executeQuery();
            while(rs.next())
            {
                json.put(rs.getString("Name"),"city");   // Not sure about this part
            }
            response.setContentType("application/json");
            response.getWriter().write(json.toString());
        }
        catch(Exception e)
        {
            e.printStackTrace();
        }

How do I do the rest of the part?

I am just learning to use JSON and AJAX.

Looks like the issue is JS in general. Fortunately there are many examples of how to do things like this on the web. — Dave Newton, Sep 11 '15 at 15:44
Yeah I looked few questions on SO. Am I doing the servlet part right? @DaveNewton — user63762453, Sep 11 '15 at 15:45
Can you provide what structure you get at `success: function ( res )` by alert or console log? — James Jithin, Sep 11 '15 at 15:49
@JamesJithin I get: Object {San Diego: "city", Tampa: "city",........ } all cities of that country — user63762453, Sep 11 '15 at 15:57
Refer to http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery to add items to the select box. Since the option value and html is same, i.e. the city name, you may return JSONArray object form server. Usually {city_id : cityname} is the combination. — James Jithin, Sep 11 '15 at 16:17
No, I just saw your comment. I am just checking that answer @JamesJithin — user63762453, Sep 12 '15 at 12:12

Praveen Kumar Purushothaman · Accepted Answer · 2015-10-09T12:38:40.807

2

Okay, so in the success function you need to append the option tags here:

success: function (res) {
  res = JSON.parse(res);
  $.each(res, function (idx, val) {
    $("select").append('<option value="' + idx + '">' + val + '</option>');
  });
}

edited Oct 09 '15 at 12:38

answered Oct 09 '15 at 12:01

Praveen Kumar Purushothaman

164,888
24
203
252

How do I fill a dropdown with values returned by servlet using AJAX

1 Answers1