如何在編輯時管理多個依賴的droplist？

Question

我有4個模型，其值取決於每個下一個模型。 讓採取4模型： （1）設備類型 （2）設備品牌 （3）設備型號 （4）設備

這裏（2）依賴於（1）的值，（3）依賴（2）的價值，（4）取決於（3）的價值。當從droplist（1）中選擇值時，它將使用make ajax調用更新（2）的下拉列表值，當從droplist（2）中選擇值時，它將使用ajax調用更新（3）的值相應地等等。

這個鏈可能是多元的。

對於新的形式，將罰款。沒有任何問題。

但是，當我們要更新，那麼我們如何以更好的方式管理這一切的東西。

我試圖

在頁負載設定我有4個模型，其值依賴於每個下一個模型。 讓採取4模型： （1）設備類型 （2）設備品牌 （3）設備型號 （4）設備

這裏（2）依賴於（1）的值，（3）依賴（2）的價值，（4）取決於（3）的價值。當從droplist（1）中選擇值時，它將使用make ajax調用更新（2）的下拉列表值，當從droplist（2）中選擇值時，它將使用ajax調用更新（3）的值相應地等等。

這個鏈可能是多元的。

對於新的形式，將罰款。沒有任何問題。

但是，當我們要更新，那麼我們如何以更好的方式管理這一切的東西。

我試圖

在頁面加載

1）從DB組設備類型值。

// On page load 
$(".equipment_type_cmb_box").each(function(){ 
    $(this).trigger('change'); 
}) 

$(function(){ 

    $(document).on('change', ".equipment_type_cmb_box", function(){ 
    $.ajax({ 
     url: '/get_equipment_brand_collection', 
     dataType: 'json', 
     data: {equipment_type_id: $(this).val()}, 
    }) 
    .done(function(data) { 
    // set equipment brand values in equipment brand droplist 
    $(".equipment_brand_cmb_box").html('').select2({ 
     data: data.equipment_brands.map(function(obj){ 
      return {id: obj.id, text: obj.name} 
     }) 
    }) 
// change the value in droplist and fire change event to get next associated droplist data 
    $(".equipment_brand_cmb_box").val(db_saved_value).trigger('change') 
    }) 
    .fail(function(errorObject) { 
     console.log("Error : ", errorObject.statusText); 
    }) 
    }) 

    $(document).on('change', ".equipment_brand_cmb_box", function(){ 
     $.ajax({ 
     url: '/get_equipment_model_collection', 
     dataType: 'json', 
     data: {equipment_brand_id: $(this).val()}, 
     }) 
     .done(function(data) { 
     // set equipment model values in equipment model droplist 
     $(".equipment_model_cmb_box").html('').select2({ 
      data: data.equipment_models.map(function(obj){ 
        return {id: obj.id, text: obj.name} 
       }) 
     }) 
     // change the value in droplist and fire change event to get next associated droplist data 
    $(".equipment_model_cmb_box").val(db_saved_value).trigger('change') 
     }) 
     .fail(function(errorObject) { 
     console.log("Error : ", errorObject.statusText); 
     }) 
    }) 

    $(document).on('change', ".equipment_model_cmb_box", function(){ 
     $.ajax({ 
     url: '/get_equipment_collection', 
     dataType: 'json', 
     data: {equipment_model_id: $(this).val()}, 
     }) 
     .done(function(data) { 
     // set equipment values in equipment droplist 
     $(".equipment_cmb_box").html('').select2({ 
      data: data.equipment.map(function(obj){ 
        return {id: obj.id, text: obj.name} 
       }) 
     }) 
// change the value in droplist and fire change event to get next associated droplist data 
     $(".equipment_cmb_box").val(db_saved_value).trigger('change') 
     }) 
     .fail(function(errorObject) { 
     console.log("Error : ", errorObject.statusText); 
     }) 
    }) 
}) 

一個cahin fire 3 ajax調用來獲取設備品牌，設備型號，設備數據。所以如果我有5鏈，那麼它會發射15個Ajax通話，這不是一個更好的方法。

任何人都可以有更好的建議嗎？ 如果任何人對這種情況有適當的解決方案，這將是很好的。

Answer 1

我不確定這是否會對您有所幫助，但您可以嘗試緩存提供選項的功能。這將減少API調用。

JSFiddle

function getOptions(endpoint, data) { 
    var hash = endpoint + JSON.stringify(data); 
    if (typeof getOptions.cache[hash] !== "undefined") { 
    console.log('Got data from cache'); 
    return Promise.resolve(getOptions.cache[hash]); 
    } 

    return $.ajax({ 
    url: endpoint, 
    dataType: 'json', 
    data: data 
    }).then(function(resp) { 
    console.log('Got data from api'); 
    getOptions.cache[hash] = resp; 
    return resp; 
    }) 
}