如何根据在 jquery 的另一个下拉列表中选择特定项目显示下拉列表？

Question

我在 mysql、india_states 和 india_cities 中创建了 2 个表。我插入了 mysql 本身的值，其中 india_states 有 4 个州，在 india_cities 中有 16 个城市名称，这意味着 india_states table 中的一个州马哈拉施特拉邦有india_cities table 中的 4 个城市。我已经在我的 html 页面中使用 jquery 成功地在下拉列表中显示了状态，下面是状态的代码。

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

现在我想做的是，当我 select 马哈拉施特拉邦时，另一个下拉列表应该自动显示仅与马哈拉施特拉邦相关的 4 个城市，为此我将 states_id 放在 india_cities table。我还创建了一个 jsp 页面，用于根据以下 url

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

这是我的 jquery 上面的代码

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

%>

代替states_id，当我输入“1”时，它显示了马哈拉施特拉邦的值，但如何动态获取states_id？因此需要一些帮助来根据第一个下拉列表的值填充我的其他下拉列表。谢谢

Answer 1

我建议您从 JSON 那里收集状态的值，例如：

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

以便在您的成功函数中，您可以使用以下方式拆分此值：

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

并将状态的id放入option标签的value属性中。

因此，最终您在选项值中获得了与每个州关联的 ID。

像这样更改您的代码：

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

              });

        }
});

然后在状态下拉列表的更改事件中调用您的 ajax，例如：

$('#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 方面有问题。要在 jsp 中创建一个 json 数组，请使用以下代码片段，

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

此处从数据库中获取数据并将其添加到json数组中。此 jsp 页面 wii return json 数组到 (111#Tamilnadu) - expected format 到您的 ajax。您可以在之后进行迭代。

如何根据在 jquery 的另一个下拉列表中选择特定项目显示下拉列表？

how to show dropdown list based on selection of a particular item in other drowdown list in jquery?

mysql

jquery

jsp

jquery-ajaxq