如何根據jquery中其他drowdown列表中的特定項目的選擇來顯示下拉列表？

Question

我已經創建在MySQL中，india_states和india_cities 2個表。從MySQL本身在那裏india_states有4個國家，並在india_cities 我已經插入的值有16點城市的名稱，是指一個國家在馬哈拉施特拉邦表india_states在india_cities表中4個城市。 我已經成功地在使用jquery的我的html頁面中顯示下拉列表中的狀態，下面是各州的代碼。

$(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>') 
       }); 
      } 
     }); 
}); 

現在我想做的事情是，當我選擇馬哈拉施特拉邦，另下拉應該自動顯示與馬哈拉施特拉邦只有4個城市，對於我已經把india_cities表states_id。 我也創建了用於顯示基於以下網址我的JSON視圖城市

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" 
} 
} 

這裏是上述

$(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>') 
      }); 
     } 
    }); 
}); 

我jQuery代碼JSP頁面

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()); 

％

在地方的states_id，當我把「1」，它讓我看到馬哈拉施特拉邦的價值，但如何動態獲取states_id？ 因此，需要一些幫助來根據第一個下拉列表的值填充我的其他下拉菜單。 謝謝

Answer 1

我建議你從你的JSON，你在哪裏收集各國對像值：

VAR：

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

，這樣在你的成功的功能，你使用可以拆分該值ABC =（數據[I] .state_name）.split（ 「＃」）;

和選項標記的價值屬性把狀態的ID。

那麼，你到底有沒有在你的期權價值的每個狀態相關聯的ID。然後在你的狀態的變化情況下拉打電話給你的AJAX像

$(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>') 

       }); 

     } 
}); 

和：

$('#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. 

      } 
    }); 

}); 

Answer 2

您在Java方面有問題

改變你這樣的代碼。要創建一個JSON數組在JSP中使用下面的代碼片段，

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); 
} 

這裏得到DB數據，並將其添加到JSON數組。這jsp頁面wii返回json數組到(111#Tamilnadu) - expected format到你的ajax。你可以在之後迭代。