繁体   English   中英

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

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

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我已经在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>')
                 });
             }
      });
});

现在我想做的是,当我选择maharashtra时,另一个下拉列表应自动显示仅与maharashtra相关的4个城市,因为我已将States_id放入了india_cities表中。 我还创建了一个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());

%>

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

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将json数组返回为(111#Tamilnadu) - expected format为ajax。 您可以随后进行迭代。

我建议您从JSON收集以下状态的值:

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

因此,在成功功能中,您可以使用以下方式拆分此值:

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

并将状态ID放在选项标签的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.

            }
    });

});
3 根据下拉列表项的选择追加div

我正在努力完成我的客户要求之一。 我已经完成了部分工作,但无法实现我的目标。 我在Google上搜索了很多,但找不到我想要的那个。 我对angularjs和学习每天都非常陌生,所以如果您发现我的问题很简单,请向我道歉 题: 我需要在下拉列表中选择彼此对应的多个div(堆 ...

7 根据其他下拉列表的选择填充一个下拉列表

我想创建两个下拉列表,类别和项目。 如果我选择一个名为car的类别,那么项目下拉列表应该包含Honda,Volvo,Nissan。 如果我选择一个名为phone的类别,那么项目下拉列表应该有这个iPhone,三星,诺基亚。 我怎样才能做到这一点? 我知道我不能用纯HTML做到 ...

8 JQuery:如何根据动态下拉列表中的选择显示 DIV

大家好,感谢任何能帮助我完成这项任务的人。 我试图结合两个现有的小提琴,目的是根据从第一个下拉选择动态创建的选择来显示单个 div 内容。 例如,我选择“Honda”,第二个下拉列表中填充了所有本田制造商“Honda1”。 然后根据该选择显示 div 信息。 这是我正在尝试的,但我似乎无法显示任 ...

2020-06-09 14:57:27 1 23   jquery
10 jQuery - 根据下拉选项选择列出结果

请查看我的演示小提琴 如果从菜单中选择一个选项,它将与另一个相应的选项匹配。 在第一个菜单中,如果您选择某种类型的考试,它将与相应的课程结果相匹配。 此外,第二个菜单允许您选择课程,并将显示相应的考试结果。 例如 - 如果您选择美国文学或教育心理学简介 ,则显示的结果是自 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM