JQuery链接/级联下拉事件

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

免责声明

我知道我的拼写错误。使用此代码之前，请拼写检查;）

更新

我已经改变了代码的前两行，我已经归缩进因为有制表和空格的混合。现在应该更容易阅读。