Question

假设我有这个HTML

<form action="#" action="get">

    <select name="college" id="college" onchange="selection('college', 'course')">
        <option value="">Select an Option</option>
        <option value="amity">Amity University</option>
        <option value="indraprastha">Indraprasth University</option>
    </select>

    <br>
    <select name="course" id="course" onchange="selection('course', 'stream')" >
        <option value="">Select an Option</option>
    </select>

    <br>
    <select name="stream" id="stream">
        <option value="">Select an Option</option>
    </select>

</form>

我有这个JSON，

{
  "amity":{
    "course":[
      {
        "name":"B.Tech",
        "value":"btech",
        "stream":[
          {
            "name":"Computer Science",
            "value":"cse"
          },
          {
            "name":"Information Technology",
            "value":"cse"
          },
          {
            "name":"Aerospace Engg.",
            "value":"cse"
          }
        ]
      },
      {
        "name":"M.Tech",
        "value":"mtech",
        "stream":[
          {
            "name":"Networking",
            "value":"net"
          },
          {
            "name":"telecommunications",
            "value":"tc"
          }
        ]
      }
    ]
  }
}

Javascript是，

function selection(s1, s2) {
    var first = document.getElementById(s1),
        second = document.getElementById(s2);

    var college = $('#college').val(),              
        cr = $('#course').val(),
        st = $('#stream').val(),
        se = $('#sem').val();

    $.getJSON("json/select.json", function(data) {

    switch(s1) {        
        case 'college':
            $.each(data[college].course, function(key, value) {
                second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
            }); break;

        case 'course':
            $.each(data[college].course[].stream, function(key, value) {
                second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
            }); break;  
    }
});
}

我正在制作一个动态下拉菜单，其中使用以前值的引用从JSON目标文件中提取下一个下拉值。从我的这个问题（link）中可以看出，我能够使用对象中的course数组获得课程的价值（第二次下拉）。

现在，由于第二个选择菜单（课程）中的值是动态填充的，我无法弄清楚如何使用相应的课程数组元素来填充流数组的下一个选择菜单选项。

由于JSON中的课程属性是一个数组，我不知道从第二个菜单中选择了哪个索引元素元素（请参阅开关案例＆＃39;当然＆＃39;，data[college].course[] index是空的）。硬编码的[0]有效，但那不是动态的。

如何使用从第二个菜单中抓取的课程值来访问stream数组。

我希望我很清楚。提前谢谢！

Answer 1

只需遍历一系列课程即可动态获取流：

for (var i = 0; i < data[college].course.length; i++) { 
    currentStream = data[college].course[i].stream; 
}

即。使用你的代码：

for (var i = 0; i < data[college].course.length; i++) {
    $.each(data[college].course[i].stream, function(key, value) {
        second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
    });
}

查找所选课程的当前流：

// assuming cr = "btech"
for (var i = 0; i < data[college].course.length; i++) {
    if (data[college].course[i].value == cr) {
        currentStream = data[college].course[i].stream;
        break;
    }
}

$.each(currentStream, function(key, value) {
    second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
});

Answer 2

function selection(s1, s2) {
var first = document.getElementById(s1),
    second = document.getElementById(s2);

var college = $('#college').val(),              
    cr = $('#course').val(),
    st = $('#stream').val(),
    se = $('#sem').val();

$.getJSON("json/select.json", function(data) {

switch(s1) {        
    case 'college':
        $.each(data[college].course, function(key, value) {
            second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
        }); break;

    case 'course':
        var course = data[college].course;
        for(var i = 0;i<course.length;i++){
            if(course[i].name === cr){ //cr is selected option                    
                $.each(course[i].stream, function(key, value) {
            second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
            }
        }

        }); break;  
}

}）; }

JSON使用命名索引访问数组对象

2 个答案: