編集時に複数の依存ドロップリストを管理するにはどうすればよいですか？

Question

私は次の各モデルに依存する4つのモデルを持っています。 てみましょう4モデル： （1）機器タイプここ

は（2）（1）の値に依存 （2）機器ブランド （3）機器のモデル （4）機器、（3）に依存on（2）の値、（4）（3）の値に依存します。

droplist（1）から値を選択すると、make ajaxコールを使用してdroplistの値を更新し、droplist（2）から値を選択すると、ajax呼び出しを使用して値を更新しますそれに応じて。

このチェーンは多分かもしれません。それは罰金する新しいフォームの

。問題ない。

しかし、私たちがアップデートするとき、どうすればこのすべてのものをより良い方法で管理できますか？

私は次の各モデルに依存している値4モデルを持っているページの読み込みセットに

を試みました。 てみましょう4モデル： （1）機器タイプここ

は（2）（1）の値に依存 （2）機器ブランド （3）機器のモデル （4）機器、（3）に依存on（2）の値、（4）（3）の値に依存します。

droplist（1）から値を選択すると、make ajaxコールを使用してdroplistの値を更新し、droplist（2）から値を選択すると、ajax呼び出しを使用して値を更新しますそれに応じて。

このチェーンは多分かもしれません。それは罰金する新しいフォームの

。問題ない。

しかし、私たちがアップデートするとき、どうすればこのすべてのものをより良い方法で管理できますか？ Iは、ページロード

1に

を試み

）は、DBから機器タイプ値を設定します。

1カヒン火3アヤックスコールは、機器ブランド、機器モデル、機器データを取得します。だから私は5チェーンを持っている場合、それは15アヤックスコールを発射し、そうするより良い方法ではありません。

いずれにしても良い提案がありますか？ この状況に適切な解決策があれば、それは素晴らしいことでしょう。

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