Question

我目前正致力于动态依赖下拉列表。我能够获得第一个项目列表，但第二个项目列表未显示在下拉列表中。我绝对是jquery的初学者，以下是我到目前为止所做的。

[{
    "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>

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

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

Answer 1

@alancfm是正确的。您不需要两次调用JSON文件。只需调用一次并将其存储在变量中即可。存储后，您可以通过获取所选$('platform')项的索引来填充第二个选择，并从中填充$('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 个答案: