Каскадный выпадающий 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, но я не могу получить значение кода продукта, которое будет создано и заполнено в раскрывающемся списке кода продукта.Следующий код работает для получения данных JSON, связанных с конкретной строкой.

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

                if (element.linevalue == val) {

                    return element.productcodelist;

                }
            });

Проверено добавлением:

alert(JSON.stringify(specSelected));

Но после этого все, что я пробовал или занимался плагиатом, имеетне работает при заполнении значения кода продукта в поле выбора #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>

Любые советы, помощь и рекомендации приветствуются.

Обновление: я выяснил, как заполнить #код продукта выберите.Не элегантно, но выполнимо.

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

                                        });
                                }           
                            }
                        }
                    }
                }

        });