jQuery链接/级联下拉事件

如何解决jQuery链接/级联下拉事件

| 我目前正在尝试使用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);   
                    }

            }

        });
    }

});

    

解决方法

        如果您将所有信息放在它们自己的元素上，我认为您会获得更好的结果。尽管众所周知我错了，但我认为select函数的上下文变得混乱起来。 而不是将每个菜单设置为对象，请尝试：

$(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\',[]);
});

免责声明 我以我的拼写错误而闻名。请在使用此代码之前进行拼写检查;） 更新资料 我已经更改了代码的前两行，并且由于制表符和空格的混合使用，使缩进归一化。现在应该更容易阅读。