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

Question

I have three dropdowns which are depend on each other. 我有三个相互依赖的下拉菜单。 Based on the selection of Dropdown A will have a list of results in Dropdown B, and based on the selection of Dropdown B will have a list of results in Dropdown C. 基于下拉列表A的选择，下拉列表B中将有一个结果列表，基于下拉列表B的选择，下拉列表C中将有一个结果列表。

I can populate the first two dropdowns without a problem. 我可以毫无问题地填充前两个下拉列表。 However the last dropdown does shows me incorrect options. 但是最后一个下拉菜单确实显示了不正确的选项。

 $(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"
      }
    ]
  }
]
}
]

First two dropdowns works fine. 前两个下拉菜单可以正常运行。 Once I select a platform from the first dropdown, second dropdown populates with the relevant tasknames. 从第一个下拉列表中选择平台后，第二个下拉列表将填充相关的任务名称。 But once I select a taskname from the second dropdown, third dropdown does show irrelevant data. 但是，一旦我从第二个下拉列表中选择了一个任务名称，第三个下拉列表便会显示不相关的数据。 I can't figure out what's wrong I'm doing here. 我不知道我在做什么错。

Answer 1

I believe the major problem you have is jsonData = result during the ajax request. 我相信您遇到的主要问题是ajax请求期间的jsonData = result 。 All ajax requests are asynchronous by default, hence, every data produced from it is mostly non-existent after the request completion. 默认情况下，所有ajax请求都是异步的，因此，在请求完成后，几乎所有不存在从其生成的数据。 So your best bet will be to pass result to the HTML DOM object during the request. 因此，最好的选择是在请求期间将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 个解决方案

解决方案1
0 2018-02-02 01:56:31

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

问题描述

1 个解决方案

解决方案1 0 2018-02-02 01:56:31

解决方案1
0 2018-02-02 01:56:31