我目前正在使用JSON，并且在数据提取方面遇到了一些问题，它只显示了我需要的3个下拉列表中的2个。我需要显示字段corregimientos，并能够选择corregimiientos下的字段。有人能帮我告诉我错过了什么吗？我几乎没有什么想法了。
这是一个任何背景的相关帖子。依赖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>耦合问题
第一个问题是因为您使用的是"name"；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>";
现在，您的platforms2将具有正确的jsondata，并使用属性nameCo。这应该能解决你的问题。
JSFiddle：https://jsfiddle.net/JordonFieldPro/318sb9g5/