如何在编辑时管理多个依赖的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; 
    }) 
}