События JQuery Chained / Cascading Dropdown

Question

В настоящее время я пытаюсь настроить набор цепочек, используя плагин Flexbox Jquery (он не предназначен специально для цепочки, но может использоваться для этого).

У меня работает цепочка, если я все установил явно, но я пытаюсь высушить свой код и сделать его более понятным. Таким образом, я пришел с кодом ниже.

Все ящики в данный момент загружаются изначально и делают свои запросы. Проблема, с которой я сталкиваюсь, заключается в том, что когда я перебираю меню (как показано ниже), я теряю функцию onSelect - она ​​срабатывает только для последнего загруженного меню.

Насколько я понимаю, поскольку каждый раз я использую другой селектор JQuery - $('#' + fbMenu.divId) - не будет иметь значения, что я тогда установлю поведение onSelect для другого меню, но, очевидно, это не так. Я как-то перезаписываю привязку каждый раз при загрузке ящика?

Надеюсь, мне не нужно указывать функциональность onSelect для каждого раскрывающегося списка, поскольку их может быть много.

Большое спасибо за любую помощь, которую вы можете оказать!

$(document).ready(function() {  

    // Create the variables for data objects  
    var vehicleMakeFb = new Object();
    var vehicleModelFb = new Object();
    var vehicleTrimFb = new Object();

    // Set up each menu with the divId, jsonUrl and the chlid menus that will be updated on select
    vehicleMakeFb.divId = 'vehicle_vehicleMake_input';
    vehicleMakeFb.jsonUrl = '/vehicles/getmakes';
    vehicleMakeFb.children = [vehicleModelFb];

    vehicleModelFb.divId = 'vehicle_vehicleModel_input';
    vehicleModelFb.jsonUrl = '/vehicles/getmodels';
    vehicleModelFb.children = [vehicleTrimFb];

    vehicleTrimFb.divId = 'vehicle_vehicleTrim_input';
    vehicleTrimFb.jsonUrl = '/vehicles/gettrims';
    vehicleTrimFb.children = [];

    // Create an array of all menu objects so that they can be iterated through
    var allMenus = [vehicleMakeFb,vehicleModelFb,vehicleTrimFb];

    // Create the parent menu
    for (var i = 0; i < allMenus.length; i++) {
        var fbMenu = allMenus[i];
        alert(fbMenu.divId);
        $('#' + fbMenu.divId).flexbox(fbMenu.jsonUrl + '.json', {  

            // Update the child menu(s), based on the selection of the first menu
            onSelect: function() {  

                    for (var i = 0; i < fbMenu.children.length; i++) {
                        var fbChild = fbMenu.children[i];
                        var hiddendiv = document.getElementById(fbMenu.divId + '_hidden');
                        var jsonurl1 = fbChild.jsonUrl + '/' + hiddendiv.getAttribute('value') + '.json';
                        alert(jsonurl1);
                        $('#' + fbChild.divId).flexbox(jsonurl1);   
                    }

            }

        });
    }

});

Answer 1

Если вы разместите всю информацию об элементах самих себя, я думаю, у вас будут лучшие результаты.Хотя я знаю, что был неправ, я думаю, что контекст функций выбора смешивается.

вместо того, чтобы настраивать каждое меню как объект, попробуйте:

$(document).ready(function() {  

    var setupdiv = (function(divId, jsonUrl, children)
    {
        jQuery('#' + divId)
            .data("jsonurl", jsonUrl)
            .data("children", children.join(",#"));
    
        // Create the parent menu
        jQuery('#' + divId).flexbox(jsonUrl + '.json', 
        {  
            // Update the child menu(s), based on the selection of the first menu
            onSelect: function() 
            {  
                var children = jQuery(this).data("children");
                var jsonUrl = jQuery(this).data("jsonurl");
                if(children)
                 {
                     children = jQuery('#' + children);
                     alert('children was true');
                 }
                 else
                 {
                     children = jQuery();
                     alert('children was false');
                 }
                 var hiddendiv = jQuery('#' + this.id + '_hidden');
                 children.each(function()
                 {
                     var childJsonUrl = jsonUrl + '/' + hiddendiv.val() + '.json';
                     alert(childJsonUrl);
                     $(this).flexbox(childJsonUrl);   
                 });
             }

         });
    });
    setupdiv('vehicle_vehicleMake_input', '/vehicles/getmakes', ['vehicle_vehicleModel_input']);

    setupdiv('vehicle_vehicleModel_input', '/vehicles/getmodels', ['vehicle_vehicleTrim_input']);

    setupdiv('vehicle_vehicleTrim_input', '/vehicles/gettrims', []);
});

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ

Я известен своими орфографическими ошибками.Пожалуйста, проверьте орфографию перед использованием этого кода;)

Обновление

Я изменил первые две строки кода и нормализовал отступы, так как было сочетаниетабуляция и пробелы.Должно быть легче читать сейчас.