我目前正在研究动态依赖下拉菜单。我能够获得第一个项目列表，但是第二个项目列表没有显示在下拉列表中。我绝对是 jquery 的初学者以下是我到目前为止所做的事情。
<强> json :
[{
"name": "A",
"task": [{
"taskname": "XX",
"time": "20"
},
{
"taskname": "YY",
"time": "10"
}
]
},
{
"name": "B",
"task": [{
"taskname": "XX",
"time": "20"
},
{
"taskname": "YY",
"time": "60"
},
{
"taskname": "ZZ",
"time": "10"
}
]
},
{
"name": "C",
"task": [{
"taskname": "XX",
"time": "20"
},
{
"taskname": "YY",
"time": "10"
}
]
}
]
<强> html :
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
Platform:
<select id="platform">
</select> Task Type:
<select id="taskname">
</select>
<script src="jquery-2.2.4.min.js"></script>
<script src="custom.js"></script>
</body>
</html>
<强> jquery :
$(function() {
var platforms;
var stateOptions;
var districtOptions;
$.getJSON('tasks.json', function(result) {
$.each(result, function(i, platform) {
platforms += "<option value='" +
platform.name +
"'>" +
platform.name +
"</option>";
});
$('#platform').html(platforms);
});
$("#platform").change(function() {
if ($(this).val() == "siab") {
$.getJSON('tasks.json', function(result) {
$.each(result, function(i, task) {
stateOptions += "<option value='" +
task.taskname +
"'>" +
task.taskname +
"</option>";
});
$('#taskname').html(stateOptions);
});
}
});
});
我想根据第一个选择获取第二个下拉列表中的相关任务名称列表。例如，当有人从第一个下拉列表中选择 siab 时，第二个下拉列表必须填充 Promobox、Newswire、Video。目前第二个下拉列表有未定义值，我不知道我在这里做错了什么。
最佳答案
@alancfm 是正确的。您不需要两次调用 JSON 文件。只需调用一次并将其存储在变量中。存储后，您可以通过获取所选 $('platform') 项的索引来填充第二个选择，并从中填充 $('taskname')。我这里有一个使用稍微不同的代码的工作 fiddle ，因为我无法进行 $.getJSON() 调用来存储变量 https://jsfiddle.net/td3o8yvr/8/
$(function() {
var platforms;
var stateOptions;
var districtOptions;
var jsonData;
$.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;
stateOptions = "";
for (i = 0; i < platforms.length; i++) {
stateOptions += "<option value='" +
platforms[i].taskname +
"'>" +
platforms[i].taskname +
"</option>";
};
$('#taskname').html(stateOptions);
});
关于javascript - JSON 相关的动态下拉值未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48551942/