Question

我有三个相互依赖的下拉菜单。根据下拉列表A的选择，将在下拉列表B中显示结果列表，并根据下拉列表B的选择将在下拉列表C中显示结果列表。

我可以毫无问题地填充前两个下拉列表。但是，最后一个下拉列表确实显示了错误的选项。

$(function() {
  var platforms;
  var tasktypes;
  var compos;
  var jsonData;
    
  $('#addnew').click(function(){
		$('#dataset').clone().appendTo($('#newfield'));
  });

  $.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;

    tasktypes = "";
    for (i = 0; i < platforms.length; i++) {
      tasktypes += "<option value='" +
        platforms[i].taskname +
        "'>" +
        platforms[i].taskname +
        "</option>";
    };
  $('#taskname').html(tasktypes);
});
    
    
$("#taskname").change(function (){
    var idc = $("#taskname").prop('selectedIndex');
    var tasktypes = jsonData[idc].task[0].component;

    compos = "";
    for (i = 0; i < tasktypes.length; i++) {
      compos += "<option value='" +
        tasktypes[i].componentname +
        "'>" +
        tasktypes[i].componentname +
        "</option>";
    };
  $('#components').html(compos);
});


});

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
<button id="addnew">Add new</button>

<div id="dataset">
Platform:
<select id="platform">
</select>
Task Type:
<select id="taskname">
</select>
Component:
<select id="components">
</select>
Units:
<input type="number" min="0" />
</div>

<div id="newfield"></div>

<button id="calculate">Calculate</button>
<button id="clear">Clear</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

的Json

[
{
    "name": "Sitecore",
    "value": "sitecore",
    "task": [
        {
            "taskname": "promobox",
            "component": [
                {
                    "componentname": "A",
                    "time": "20"
      },
                {
                    "componentname": "B",
                    "time": "10"
      }
    ]
  },
        {
            "taskname": "video",
            "component": [
                {
                    "componentname": "C",
                    "time": "20"
      },
                {
                    "componentname": "D",
                    "time": "10"
      }
    ]
  }
]
},


   {
    "name": "Siab",
    "value": "siab",
    "task": [
        {
            "taskname": "promobox",
            "component": [
                {
                    "componentname": "E",
                    "time": "20"
      },
                {
                    "componentname": "F",
                    "time": "10"
      }
    ]
  },

        {
            "taskname": "newswire",
            "component": [
                {
                    "componentname": "G",
                    "time": "20"
      },
                {
                    "componentname": "H",
                    "time": "10"
      }
    ]
  },
        {
            "taskname": "video",
            "component": [
                {
                    "componentname": "I",
                    "time": "20"
      },
                {
                    "componentname": "J",
                    "time": "10"
      }
    ]
  }
]
}
]

前两个下拉列表工作正常。从第一个下拉列表中选择一个平台后，第二个下拉列表将填充相关的任务名称。但是，一旦我从第二个下拉列表中选择了一个任务名称，第三个下拉列表就会显示无关的数据。我无法弄清楚我在这里做错了什么。

Answer 1

我认为在ajax请求期间，您遇到的主要问题是jsonData = result。默认情况下，所有ajax请求都是异步的，因此，在请求完成后，从它生成的每个数据通常都不存在。因此，最好的办法是在请求期间将result传递给HTML DOM对象。

$.getJSON('tasks.json', function(result) {
$('#platform').data('jsonData',result);//Assign Json data to data object of platform id

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

JSON依赖动态下拉列表第三级数组错误

1 个答案: