JSON 相关的动态下拉值未定义

Question

I am currently working on a dynamic dependent dropdown.我目前正在研究动态依赖下拉列表。 I was able to get the first list of items however the second list of items doesn't show in the dropdown.我能够获得第一个项目列表，但是第二个项目列表没有显示在下拉列表中。 I'm absolute beginner to jquery and following is what I have done so far.我绝对是jquery 的初学者，以下是我迄今为止所做的。

json : json ：

[{
    "name": "A",
    "task": [{
        "taskname": "XX",
        "time": "20"
      },
      {
        "taskname": "YY",
        "time": "10"
      }
    ]
  },
  {
    "name": "B",
    "task": [{
        "taskname": "XX",
        "time": "20"
      },
      {
        "taskname": "YY",
        "time": "60"
      },
      {
        "taskname": "ZZ",
        "time": "10"
      }
    ]
  },
  {
    "name": "C",
    "task": [{
        "taskname": "XX",
        "time": "20"
      },
      {
        "taskname": "YY",
        "time": "10"
      }
    ]
  }
]

html : html :

<!DOCTYPE html>
<html>

<head>
  <title>test</title>
</head>

<body>
  Platform:
  <select id="platform">
    </select> Task Type:
  <select id="taskname">
    </select>
  <script src="jquery-2.2.4.min.js"></script>
  <script src="custom.js"></script>
</body>

</html>

jquery : 查询：

$(function() {
  var platforms;
  var stateOptions;
  var districtOptions;
  $.getJSON('tasks.json', function(result) {
    $.each(result, function(i, platform) {
      platforms += "<option value='" +
        platform.name +
        "'>" +
        platform.name +
        "</option>";
    });
    $('#platform').html(platforms);
  });

  $("#platform").change(function() {
    if ($(this).val() == "siab") {
      $.getJSON('tasks.json', function(result) {
        $.each(result, function(i, task) {
          stateOptions += "<option value='" +
            task.taskname +
            "'>" +
            task.taskname +
            "</option>";
        });
        $('#taskname').html(stateOptions);
      });
    }
  });
});

I want to get the list of relative task names in the second dropdown based on the first selection.我想根据第一个选择在第二个下拉列表中获取相关任务名称列表。 For an example when someone selects siab from first dropdown, the second dropdown must populate with Promobox , Newswire , Video .例如，当有人从第一个下拉列表中选择 siab 时，第二个下拉列表必须填充Promobox 、 Newswire 、 Video 。 Currently the second dropdown has undefined values I don't know what I'm doing wrong here.目前第二个下拉菜单有undefined值我不知道我在这里做错了什么。

Answer 1

@alancfm is correct. @alancfm 是正确的。 You don't need to call your JSON file twice.您不需要两次调用您的 JSON 文件。 Just call it once and store it in a variable.只需调用一次并将其存储在变量中。 Once stored, you can populate your second select by getting the index of the selected $('platform') item and populate $('taskname') from that.存储后，您可以通过获取所选$('platform')项目的索引并$('taskname')填充$('taskname')来填充第二个选择。 I have a working fiddle here using somewhat different code because I wasn't able to make the $.getJSON() call to store the variable https://jsfiddle.net/td3o8yvr/8/我在这里使用了一些不同的代码，因为我无法调用$.getJSON()来存储变量https://jsfiddle.net/td3o8yvr/8/

$(function() {
  var platforms;
  var stateOptions;
  var districtOptions;
  var jsonData;

  $.getJSON('tasks.json', function(result) {
    jsonData = result;

    $.each(result, function(i, platform) {
    platforms += "<option value='" +
      platform.name +
      "'>" +
      platform.name +
      "</option>";
    });
    $('#platform').html(platforms);
  });

  $("#platform").change(function (){
    var idx = $("#platform").prop('selectedIndex');
    var platforms = jsonData[idx].task;

    stateOptions = "";
    for (i = 0; i < platforms.length; i++) {
      stateOptions += "<option value='" +
        platforms[i].taskname +
        "'>" +
        platforms[i].taskname +
        "</option>";
    };

  $('#taskname').html(stateOptions);

});

JSON 相关的动态下拉值未定义

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-01-31 23:02:15

JSON 相关的动态下拉值未定义

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-01-31 23:02:15

解决方案1
1 已采纳 2018-01-31 23:02:15