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更改功能将启动，但我无法在productcode下拉列表中获取要创建和填充的productcodevalue。以下代码确实可以获取与特定行关联的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));         
                });
              }
            }
        });

对于表名的第三个下拉列表，仍要寻求建议，因为它是一个嵌套数组，需要与行和乘积码下拉列表相等。

Answer 1

不是很优雅，但是想出来了。既然可以了，我将关闭它。如果有人认为我可以改善我的代码，请务必在此处发布您的建议。

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

1 个答案: