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

Question

我目前正在研究动态依赖下拉列表。 我能够获得第一个项目列表，但是第二个项目列表没有显示在下拉列表中。 我绝对是jquery 的初学者，以下是我迄今为止所做的。

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 :

<!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>

查询：

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

我想根据第一个选择在第二个下拉列表中获取相关任务名称列表。 例如，当有人从第一个下拉列表中选择 siab 时，第二个下拉列表必须填充Promobox 、 Newswire 、 Video 。 目前第二个下拉菜单有undefined值我不知道我在这里做错了什么。

Answer 1

@alancfm 是正确的。 您不需要两次调用您的 JSON 文件。 只需调用一次并将其存储在变量中。 存储后，您可以通过获取所选$('platform')项目的索引并$('taskname')填充$('taskname')来填充第二个选择。 我在这里使用了一些不同的代码，因为我无法调用$.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