级联下拉列表 JSON

Question

是的，这个已经发过很多次了。但是我无法在其他帖子中找到我需要的帮助。我有一个 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 change 功能将启动，但我无法在产品代码下拉列表中创建和填充产品代码值。以下代码确实可以获取与特定行关联的 JSON 数据。

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

                if (element.linevalue == val) {

                    return element.productcodelist;

                }
            });

通过添加验证：

alert(JSON.stringify(specSelected));

但在那之后我尝试或抄袭的任何东西都无法将产品代码值填充到#productcode select 框中。

<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));         
                });
              }
            }
        });

仍在就表名的第三个下拉列表寻求建议，因为它是一个嵌套数组，需要等于行和产品代码下拉列表。

Answer 1

不优雅，但想通了。因为它有效，我将关闭它。如果有人看到我可以改进我的代码的方法，一定要 post 您的建议。

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

                                        });
                                }           
                            }
                        }
                    }
                }

        });

级联下拉列表 JSON

Cascade Dropdown JSON

javascript

arrays

json

cascadingdropdown