Wie man mehrere abhängige Auswahllisten beim Bearbeiten verwaltet?

Question

Ich habe 4 Modelle, deren Wert von jedem nächsten Modell abhängt. Lassen Sie nehmen 4 Modell: (1) Gerätetyp (2) Geräte Marke (3) Ausrüstung Modell (4) Anlagen

Hier (2) ist abhängig von (1) 's-Wert, (3) abhängen Der Wert von (2) (4) hängt vom Wert von (3) ab.

Wenn ich den Wert aus droplist (1) wähle, aktualisiert er (2) den Droplist-Wert mit make ajax call, wählt den Wert aus der droplist (2) und aktualisiert dann den Wert von 3 mittels ajax call entsprechend und so weiter.

Diese Kette kann mehrfach sein.

Für neue Form wird es in Ordnung. Kein Problem.

Aber wenn wir für das Update dann gehen Wie können wir das alles auf eine bessere Weise verwalten.

versuchte ich

Auf Seite Lasteinstellwert I 4 Modell haben, die Wert auf jedem nächste Modell abhängig ist. Lassen Sie nehmen 4 Modell: (1) Gerätetyp (2) Geräte Marke (3) Ausrüstung Modell (4) Anlagen

Hier (2) ist abhängig von (1) 's-Wert, (3) abhängen Der Wert von (2) (4) hängt vom Wert von (3) ab.

Wenn ich den Wert aus droplist (1) wähle, aktualisiert er (2) den Droplist-Wert mit make ajax call, wählt den Wert aus der droplist (2) und aktualisiert dann den Wert von 3 mittels ajax call entsprechend und so weiter.

Diese Kette kann mehrfach sein.

Für neue Form wird es in Ordnung. Kein Problem.

Aber wenn wir für das Update dann gehen Wie können wir das alles auf eine bessere Weise verwalten.

Ich versuchte

Auf Seite Last

1) Satz Gerätetyp Wert von 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); 
     }) 
    }) 
}) 

Ein Cahin Feuer 3 Ajax Anruf Gerät Ausrüstung, Gerätemodell, Gerätedaten zu erhalten. Also, wenn ich 5 Ketten habe, dann feuert es 15 Ajax Call und das ist kein besserer Weg dies zu tun.

Kann jemand einen besseren Vorschlag dafür haben? Es wird großartig sein, wenn jemand für diese Situationen die richtige Lösung hat.

Answer 1

Ich bin nicht sicher, ob das Ihnen helfen wird, aber Sie könnten versuchen, die Funktion, die die Optionen bereitstellt, zwischenzuspeichern. Das wird die API-Anrufe reduzieren.

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; 
    }) 
}