下拉 JSON 数据获取答案

【问题标题】：Dropdown JSON data fetch下拉 JSON 数据获取
【发布时间】：2021-04-28 03:34:42
【问题描述】：

我目前正在使用 JSON，但在获取数据时遇到了一些问题，它只显示了我需要的 3 个下拉列表中的 2 个。我需要显示字段 corregimientos 并能够选择 corregimientos 下的字段。有人可以帮助我并告诉我我错过了什么吗？我几乎没有想法了。

这是任何背景的相关帖子。 JSON dependent dynamic dropdown values are undefined

var jsonData = [
    {
        "name":"default"
    },
    {
        "name":"Panamá",
        "district":[
            {
                "districtname":"Balboa",
                "corregimientos":[
                    {
                        "nameCo":"La Guinea",
                        "price":2.00
                    },
                    {
                        "nameCo":"San Miguel",
                        "price":2.00
                    },
                    {
                        "nameCo":"La Ensenada",
                        "price":2.00
                    },
                    {
                        "nameCo":"La Esmeralda",
                        "price":2.00
                    }
                ]
            }
        ]
    },
    {
        "name":"Panamá2",
        "district":[
            {
                "districtname":"default"
            },
            {
                "districtname":"Balboa2",
                "corregimientos":[
                    {
                        "nameCo":"La Guinea",
                        "price":2.00
                    },
                    {
                        "nameCo":"San Miguel",
                        "price":2.00
                    },
                    {
                        "nameCo":"La Ensenada",
                        "price":2.00
                    },
                    {
                        "nameCo":"La Esmeralda",
                        "price":2.00
                    }
                ]
            }
        ]
    }
];

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

  for (i = 0; i < jsonData.length; i++) {
    platforms += "<option value='" +
      jsonData[i].name +
      "'>" +
      jsonData[i].name +
      "</option>";
  }
  $('#platform').html(platforms);

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

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

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

  });
  $("#taskname").change(function() {
    var idx2 = $("#platform").prop('selectedIndex');
    var platforms2 = jsonData[idx2].name;

    stateOptions2 = "";
    for (j = 0; j < platforms2.length; j++) {
      stateOptions2 += "<option value='" +
        platforms2[j].corregimientos +
        "'>" +
        platforms2[j].corregimientos +
        "</option>";
    };

    $('#taskname2').html(stateOptions2);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

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

<body>
  Platform:
  <select id="platform">
  </select>
  
  Task Type:
  <select id="taskname">
  </select>
  
  Task Type2:
  <select id="taskname2">
  </select>
</body>

</html>

【问题讨论】：

标签： jquery json fetch dropdown

【解决方案1】：

夫妻问题

第一个问题是因为您在 idx2 处使用了 jasonData 的“名称”。

var platforms2 = jsonData[idx2].name`

应该是

var platforms2 = jsonData[idx].district[idx2].corregimientos

第二个是您使用了错误列表中的 idx2。

var idx2 = $("#taskname").prop('selectedIndex');
var idx = $("#platform").prop('selectedIndex');

您需要两个索引才能找到正确的数据。

第二个下拉菜单的正确代码应该是这样开始的：

var idx2 = $("#taskaname").prop('selectedIndex');
var idx = $("#platform").prop('selectedIndex');
var platforms2 = jsonData[idx].districts[idx2].corregimientos

...
...

stateOptions2 += "<option value='" +
        platforms2[j].nameCo+
        "'>" +
        platforms2[j].nameCo +
        "</option>";

现在您的平台 2 中将包含正确的 jsondata 并使用属性 nameCo。这应该可以解决您的问题。

JSFiddle：https://jsfiddle.net/JordonFieldPro/318sb9g5/

【讨论】：

我尝试了该解决方案，但最后没有显示任何输出。有什么想法吗？
我调整了我给出的答案。我使用了“districts”而不是“district”并且拼错了第二个下拉名称。这是我用来测试它的 JS fiddle。 jsfiddle.net/JordonFieldPro/318sb9g5/2
这里我对其进行了更多调整以管理空集合。 jsfiddle.net/JordonFieldPro/318sb9g5
嘿，说实话，你把它压垮了！！你做到了兄弟。真的很好，你让它工作了，现在我可以将真实数据应用到我的电子商务中，谢谢