【发布时间】：2018-12-12 20:23:47
【问题描述】：
是的，这已经发布了很多次了。但我无法在其他帖子中找到我需要的帮助。我有一个 JSON 用于填充级联下拉列表。第一个下拉列表的初始填充效果很好，但我无法填充其他两个。我相信这是由于我尝试过循环、嵌套循环等的 JSON 中的嵌套数组......
这是我的 JSON：
"DATA": [
{
"productcodelist": [
{
"tablenamelist": [
{
"tablenamevalue": "FryLineProcessGrading"
}
],
"productcodevalue": 10055440000148
},
{
"tablenamelist": [
{
"tablenamevalue": "FryLineProcessGrading"
}
],
"productcodevalue": 10071179018124
},
{
"tablenamelist": [
{
"tablenamevalue": "FryLineProcessGrading"
},
{
"tablenamevalue": "ProcessGradingFry"
},
{
"tablenamevalue": "UODrying"
},
{
"tablenamevalue": "UOFreezing"
}
],
"productcodevalue": 10071179036432
},
{
"tablenamelist": [
{
"tablenamevalue": "FryLineProcessGrading"
},
{
"tablenamevalue": "ProcessGradingFry"
},
{
"tablenamevalue": "UODrying"
},
{
"tablenamevalue": "UOFreezing"
}
],
"productcodevalue": 10071179037545
},
{
"tablenamelist": [
{
"tablenamevalue": "FryLineProcessGrading"
},
{
"tablenamevalue": "ProcessGradingFry"
},
{
"tablenamevalue": "UODrying"
},
{
"tablenamevalue": "UOFreezing"
}
],
"productcodevalue": 10071179037613
},
{
"tablenamelist": [
{
"tablenamevalue": "FryLineProcessGrading"
},
{
"tablenamevalue": "ProcessGradingFry"
},
{
"tablenamevalue": "UODrying"
},
{
"tablenamevalue": "UOFreezing"
}
],
"productcodevalue": 10071179462033
}
],
"linevalue": 1
},
{
"productcodelist": [
{
"tablenamelist": [
{
"tablenamevalue": "HalverSizeCounts"
}
],
"productcodevalue": 10071179036449
}
],
"linevalue": 2
},
{
"productcodelist": [
{
"tablenamelist": [
{
"tablenamevalue": "MetalDetectorCheckSheet"
}
],
"productcodevalue": 10071179036432
}
],
"linevalue": 10
}
]
}
这是我的 JavaScript 代码：
$(document).ready(function(){
var specData = [];
var lineCategory = $('#line').val();
var productcodeCategory = $('#productcode').val();
$.ajax(
{
type: "get",
url: "index.cfm?controller=ProcessSpecs&Action=getSpecData",
dataType: "json",
success: function(objResponse) {
if (objResponse.SUCCESS == true) {
specData = objResponse.DATA;
$('#line')
.append('<option>Select Lines</option>')
$.each(specData, function(k, v) {
$('#line')
.append($('<option>', {value : v.linevalue})
.text(v.linevalue))
});
$('#line').val(linevalue).trigger('change');
} else {
}
},
error: function(objRequest, strError) {
}
});
$('#line').change(function() {
var val = $(this).val();
var specSelected = jQuery.grep(specData, function(element, index) {
if (element.linevalue == val) {
return element.productcodelist;
}
});
$('#productcode')
.find('option')
.remove()
.end();
$.each(specData.productcodelist, function(k, v) {
$('#productcode')
.append($('<option>', {value: v.productcodevalue})
.text(v.productcodevalue));
});
});
});
#line 更改功能将启动，但我无法在产品代码下拉列表中创建和填充产品代码值。以下代码确实可以获取与特定行关联的 JSON 数据。
var specSelected = jQuery.grep(specData, function(element, index) {
if (element.linevalue == val) {
return element.productcodelist;
}
});
通过添加验证：
alert(JSON.stringify(specSelected));
但在那之后，我尝试或抄袭的任何内容都无法将 productcodevalue 填充到#productcode 选择框中。
<form name="getSpecData">
<select name="line" id="line">
</select>
<select name="productcode" id="productcode">
</select>
<select name="tablename" id="tablename">
</select>
<input type="Submit" value="Get Specs" />
</form>
感谢任何建议、帮助和/或指导。
更新：我已经弄清楚如何填充#productcode 选择。不优雅，但可行。
$('#line').change(function() {
var val = $(this).val();
var specSelected = jQuery.grep(specData, function(element, index) {
if (element.linevalue == val) {
return element.productcodelist;
}
});
$('#productcode')
.find('option')
.remove()
.end();
$('#productcode')
.append('<option>Select Product Code</option>')
$('#tablename')
.append('<option>Select Product Code First</option>')
for (productcodelist in specSelected) {
for (tablenamelist in specSelected[productcodelist]) {
$.each(specSelected[productcodelist][tablenamelist], function(k, v) {
$('#productcode')
.append($('<option>', {value: v.productcodevalue})
.text(v.productcodevalue));
});
}
}
});
仍在寻求有关 tablename 的第三个下拉列表的建议，因为它是一个嵌套数组，需要等于 line 和 productcode 下拉列表。
【问题讨论】：
标签： javascript arrays json cascadingdropdown