时间戳

首页 > 解决方案 > 下拉 JSON 数据获取

jquery - 下拉 JSON 数据获取

问题描述

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

这是任何背景的相关帖子。JSON相关的动态下拉值未定义

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>

标签： jqueryjsonfetchdropdown

解决方案

夫妻问题

第一个问题是因为您在 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/

推荐阅读