相互依存ドロップダウンリストJquery Knockout asp.net

Question

私は今この問題で私の頭を傷つけています。

私はA-B-Cに似た連結フィールドを持っているとします。私は{[A1-B1-C2]、[A1-B1-C1]、[A2-B2-C3]、...}のようなオブジェクトのセットを持っています。

私はselect2プラグインを使用して、このオブジェクトのセットをフィルタリングするフィルタを構築しています。問題は、A、B、Cのフィルターが相互依存していなければならないことです。だから私はA1の値のドロップダウン私は選択可能な値としてBのドロップダウンでB1とCの値のドロップダウンでC2とC1を持って選択した場合。最初にB1でフィルタBを設定した場合、A1をAドロップダウンリストに、C1とC2をCドロップダウンに入れる必要があります。 A、B、Cドロップダウンには、最初は「すべて」のデフォルト値が含まれています。しかし、値を使って遊んでみると、ドロップダウンリストを再作成する必要があります。

問題は私が価値を取り除くときに来る、私はそれを処理するための最良の方法を見つけることができないようだ。上の同じデータセットを使用して、次のシナリオを考えてみましょう。最初は3つの依存ドロップダウンリストに「すべて」の値があります。私は最初のものでA1を選択します。だから私は選択肢としてB1を持ち、Cでは選択肢としてC1とC2を持っています。 BドロップダウンでB1を選択し、Aドロップダウンリストでmy allオプションを失っても、CドロップダウンにC1とC2が残っています（この時点でCの値は選択されておらず、「すべて」オプションはもうありません） 。今私はドロップダウンを空にすることにしました。 Bドロップダウンが選択された唯一のオプションです。B、B、Bのすべての値を再び使用可能にする必要があります。

私は十分にはっきりしていると思います。私はすでに変更が発生するたびにajaxクエリを送信するソリューションがありますが、重すぎると感じています。今のところAは2つの可能な値を持ち、Bは20の可能な値を持っています.Cは無限の値を持つことができます。

Answer 1

私はあなたが購読可能な、または計算を使用したいと思うように私に聞こえますが、私は詳細を確認することはできません。計算はおそらくもう少し実用的です、私が考え出すことができる最良の例がここにあります。サブスクライバブルも同様に動作しますが、AJAXコールを使用すると使いやすくなります。

function viewModel() { 
 
    var self = this; 
 
    self.SelectedCategory = ko.observable(); 
 
    self.SecondCategory = ko.observable(); 
 
    self.Choices = ko.observableArray([ 
 
    "Hats", "Jackets", "Shoes" 
 
    ]) 
 

 
    self.DependantChoices = ko.computed(function() { 
 
    if (self.SelectedCategory() == "Hats") { 
 
     return ["Top Hats", "Baseball Caps"]; 
 
    } 
 
    if (self.SelectedCategory() == "Jackets") { 
 
     return ["Winter Jackets", "Summer Jackets"]; 
 
    } 
 
    if (self.SelectedCategory() == "Shoes") { 
 
     return ["Dance Shoes", "Athletic Shoes"]; 
 
    } 
 
    }) 
 

 
    self.SecondDependantChoices = ko.computed(function() { 
 
    if (self.SecondCategory() == "Top Hats") { 
 
     return ["White", "Black"]; 
 
    } 
 
    if (self.SecondCategory() == "Baseball Caps") { 
 
     return ["Blue Team", "Red Team"]; 
 
    } 
 
    if (self.SecondCategory() == "Winter Jackets") { 
 
     return ["Puffy Jackets", "Long Jackets"]; 
 
    } 
 
    if (self.SecondCategory() == "Summer Jackets") { 
 
     return ["Leather Jackets", "No Jacket, it's summer"]; 
 
    } 
 
    if (self.SecondCategory() == "Dance Shoes") { 
 
     return ["Fast Dance Shoes", "Slow Dance Shoes"]; 
 
    } 
 
    if (self.SecondCategory() == "Athletic Shoes") { 
 
     return ["Running Shoes", "Programmers Shoes"]; 
 
    } 
 
    }) 
 

 
} 
 

 
ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<select data-bind="options: Choices, value: SelectedCategory"> 
 

 
</select> 
 

 
<select data-bind="options: DependantChoices,value:SecondCategory"> 
 

 
</select> 
 

 
<select data-bind="options: SecondDependantChoices"> 
 

 
</select>