如何根据jQuery中其他下拉列表中特定项的选择显示下拉列表？

Question

I have created 2 Tables in mysql , india_states and india_cities. I have inserted values from mysql itself where india_states has 4 states , and in india_cities there are 16 city names , means one state Maharashtra in india_states table has 4 cities in india_cities table. I have successfully shown the states in a dropdown using in my html page using jquery , below is the code for the states.

$(document).ready(function(){
var states_name="";
$.ajax({
     type: 'GET', 
        url: 'http://localhost:8082/JqueryForm/html/jsp/states_name.jsp', 
        data: { get_param: 'value' }, 
        dataType: 'json',
        success: function (data) { 
        var select = $('#select_states').empty();
              $.each(data, function(i) {
                  states_name = data[i].state_name;
                  console.log("states_name:" + states_name);
                  select.append('<option value="'
                          + states_name
                          + '">'
                          + states_name
                          + '</option>')
                 });
             }
      });
});

Now what i want to do is , when i select maharashtra , the other dropdown should automatically show 4 cities related to maharashtra only , for that i have put the states_id in india_cities table. I have also created a jsp page which is used to show my cities in json view based on the following url

http://localhost:8082/JqueryForm/html/jsp/city_names.jsp?states_id=1

{
1: {
city_name: "Mumbai"
},
2: {
city_name: "Pune"
},
3: {
city_name: "Thane"
},
4: {
city_name: "Navi Mumbai"
}
}

and here is my jquery code for the above

$(document).ready(function(){
$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=
    ([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return results[1] || 0;
    }
}
var states_id = $.urlParam('states_id');
var cities_name="";
$.ajax({
     type: 'GET', 
        url: 'http://localhost:8082/JqueryForm/html/jsp/city_names.jsp', 
        data: { states_id: states_id }, 
        dataType: 'json',
        success: function (data) { 
        var select = $('#select_cities').empty();
              $.each(data, function(i) {
                  cities_name = data[i].city_name;
                  console.log("cities_name:" + cities_name);
                  select.append('<option value="'
                         + cities_name
                         + '">'
                         + cities_name
                         + '</option>')
            });
         }
     });
});

india_states.jsp

<%
JSONObject finalJSON = new JSONObject();
Sql_Server details = new Sql_Server();
request.setCharacterEncoding("utf8");
response.setContentType("application/json");
List<String> list = details.getIndiaStates();
int recordCounter = 1;
JSONArray jArray = new JSONArray();
for (int i = 0; i < list.size(); i++) {
    JSONObject formDetailsJson = new JSONObject();
    formDetailsJson.put("state_name", list.get(i));
    finalJSON.put(recordCounter, formDetailsJson);
    ++recordCounter;
}
out.println(finalJSON.toString());

%>

In place of states_id when i put "1" it shows me the values of maharashtra state, but how to get the states_id dynamically ? So need some help to populate my other dropdown based on the values of first dropdown. Thank you

Answer 1

You have issue in java side. To create a json array in jsp use the following code snippet,

JSONArray cellarray = new JSONArray();
JSONObject cellobj = null; //new JSONObject();
int state_id=request.getParameter("state_id");

try{
    // Do not open DB connection like this, this is for your understanding
    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 city where state_id='"+state_id+"'  ");
    while(rs.next()){
        cellobj = new JSONObject();
        //concatinate id with string
        cellobj.put("citi_name", rs.getString(1) +"#"+ rs.getString(3));
        cellarray.add(cellobj);
    }  
    System.out.println(cellarray);
}
catch(Exception e){
     System.out.println(e);
}

Here get data from db and add it into json array. this jsp page wii return json array to (111#Tamilnadu) - expected format to your ajax. You can iterate afterwards.

Answer 2

I suggest you that from your JSON, where you are collecting the value of states like :

states_name = data[i].state_name; // get this value from your JSP like 123#Maharashtra

so that in your success function you can split this value using:

var abc=(data[i].state_name).split("#");

and put id of the state in the value attribute of option tag.

So, in the end you have the IDs associated with each state in your option value.

Change in your code like this :

$(document).ready(function(){
var states_name="";
$.ajax({
     type: 'GET', 
        url: 'http://localhost:8082/JqueryForm/html/jsp/states_name.jsp', 
        data: { get_param: 'value' }, 
        dataType: 'json',
        success: function (data) { 
        var select = $('#select_states').empty();
              $.each(data, function(i) {
                  states_name = data[i].state_name;
                  var abc = states_name.split("#");
                  console.log("states_name:" + states_name);
                  select.append('<option value="'
                          + abc[0]
                          + '">'
                          + abc[1]
                          + '</option>')

              });

        }
});

and then on the change event of your states drop down call your ajax like :

$('#select_states').on("change", function () {
var state_id=$('#select_states').val();
$.ajax({
         type: 'GET', 
            url: 'http://localhost:8082/JqueryForm/html/jsp/cities_name.jsp', 
            data: { id : state_id }, 
            dataType: 'json',
            success: function (data) { 
                  //populate the cities drop down.

            }
    });

});