Javascript 级联下拉式JSON

是的，这已经贴了很多次了。但是我在其他岗位上找不到我需要的帮助。我有一个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));         
            });

        });

});

通过添加以下内容进行验证：

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 select。不优雅，但可行

$('#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));         
                });
              }
            }
        });

$（'#行'）。更改（函数（）{
var val=$（this.val（）；
var specSelected=jQuery.grep（specData，函数（元素，索引）{
if（element.linevalue==val）{
返回element.productcodelist；
}
});
$（“#产品代码”）
.find（'选项'）
.删除（）
.end（）；
$（“#产品代码”）
.append（'选择产品代码'）
$（“#表名”）
.append（'先选择产品代码'）
用于（选定规格中的productcodelist）{
对于（specSelected[productcodelist]中的tablenamelist）{
$.each（specSelected[productcodelist][tablenamelist]，函数（k，v）{
$（“#产品代码”）
.append（$（''，{value:v.productcodevalue}）
.文本（v.productcodevalue））；
});
}
}
});

---

仍在寻求关于tablename的第三个下拉列表的建议，因为它是一个嵌套数组，需要与line和productcode下拉列表相等。

不优雅，但已经解决了。既然它起作用了，我就关闭它。如果有人看到我可以改进代码的方法，请务必在这里发布您的建议

$('#productcode').change(function() {

                var lineval = $('#line').val();
                var productcodeval = $("#productcode").val();

                var specSelected = jQuery.grep(specData, function(element, index) {

                    if (element.linevalue == lineval) {

                        return element.productcodelist;

                    }
                });

                $('#tablename')
                .find('option')
                .remove()
                .end();

                $('#tablename')
                .append('<option>Select Product Code</option>')

                for (productcodelist in specSelected) {
                    for (tablenamelist in specSelected[productcodelist]) {
                        for (productcodevalue in specSelected[productcodelist][tablenamelist]) {
                            if(specSelected[productcodelist][tablenamelist][productcodevalue].productcodevalue == productcodeval) {
                                for (tablenamevalue in specSelected[productcodelist][tablenamelist][productcodevalue]) {
                                        $.each(specSelected[productcodelist][tablenamelist][productcodevalue][tablenamevalue], function(k, v) {
                                            $('#tablename')
                                                .append($('<option>', {value: v.tablenamevalue})
                                                .text(v.tablenamevalue));

                                        });
                                }           
                            }
                        }
                    }
                }

        });

$（'#productcode'）。更改（函数（）{
var lineval=$（'#line'）.val（）；
var productcodeval=$（“#productcode”）.val（）；
var specSelected=jQuery.grep（specData，函数（元素，索引）{
if（element.linevalue==lineval）{
返回element.productcodelist；
}
});
$（“#表名”）
.find（'选项'）
.删除（）
.end（）；
$（“#表名”）
.append（'选择产品代码'）
用于（选定规格中的productcodelist）{
对于（specSelected[productcodelist]中的tablenamelist）{
for（选定[productcodelist][tablenamelist]中的productcodevalue）{
如果（specSelected[productcodelist][tablenamelist][productcodevalue]。productcodevalue==productcodeval）{
对于（所选[productcodelist][tablenamelist][productcodevalue]中的tablenamevalue）{
$.each（specSelected[productcodelist][tablenamelist][productcodevalue][tablenamevalue]，函数（k，v）{
$（“#表名”）
.append（$（''，{value:v.tablenamevalue}）
.文本（v.tablenamevalue））；
});
}           
}
}
}
}
});

$('#productcode').change(function() {

                var lineval = $('#line').val();
                var productcodeval = $("#productcode").val();

                var specSelected = jQuery.grep(specData, function(element, index) {

                    if (element.linevalue == lineval) {

                        return element.productcodelist;

                    }
                });

                $('#tablename')
                .find('option')
                .remove()
                .end();

                $('#tablename')
                .append('<option>Select Product Code</option>')

                for (productcodelist in specSelected) {
                    for (tablenamelist in specSelected[productcodelist]) {
                        for (productcodevalue in specSelected[productcodelist][tablenamelist]) {
                            if(specSelected[productcodelist][tablenamelist][productcodevalue].productcodevalue == productcodeval) {
                                for (tablenamevalue in specSelected[productcodelist][tablenamelist][productcodevalue]) {
                                        $.each(specSelected[productcodelist][tablenamelist][productcodevalue][tablenamevalue], function(k, v) {
                                            $('#tablename')
                                                .append($('<option>', {value: v.tablenamevalue})
                                                .text(v.tablenamevalue));

                                        });
                                }           
                            }
                        }
                    }
                }

        });