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

免責聲明

我知道我的拼寫錯誤。使用此代碼之前，請拼寫檢查;）

更新

我已經改變了代碼的前兩行，我已經歸縮進因爲有製表和空格的混合。現在應該更容易閱讀。