Dropdown JSON数据获取
Dropdown JSON数据获取
提问于 2021-04-28 11:34:43
我目前正在使用一个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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-28 11:51:34
几个问题
第一个问题是因为您在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。这应该会解决你的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67293406
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号