ユーザーが最後に特定のものを選択するのに役立つと思われるフォームがありますが、ユーザーが最初のオプションを入力すると、以下の他のオプションが変更されます。このようなもの：
Type:
{
t1:{
Number of X:{
1:{...}
2:{...}
}
Number of Y:{...}
}
t2:{
Number of X:{
100:{...}
200:{...}
}
Number of Y:{...}
}
}
ユーザーは、オプションt1およびt2を含むフィールドTypeを持っています。t1を選択すると、フィールド「Number of X」は1および2で埋められ、t2を選択すると、フィールド「NumberofX」は100で埋められます。および200など。一部の選択肢は複数のフィールドに依存しており、直接的な依存関係ではありません（たとえば、ユーザーが「Number of X」=100を選択した場合、Fooは「A」です。それ以外の場合、Fooは「A」、「B」になります。または「C」ですが、Fooは「NumberofX」より下ではありません）。
すべてのフィールドにイベントリスナーを設定してその変更を確認するという非常に単純な実装を試しましたが、最終的にコードが制御不能になり始め、$("#foo").change(function(){...});これをリッスンしているフィールドがそうであるかどうかはすぐにはわかりbarません。 fbar。
JSONも（上記の例のように）試しましたが、繰り返しが多く、ツリーが深くなり、可能性のあるものの数が増えるため、同じフィールドを何度も書き込む必要があります。選択t1すると、オプションが直接下にない場合でも、通常は別のフィールドに完全に依存している場合でも、オプションが直接変更されることがあります。これは、JSONでの繰り返しです。
この問題にどのようにアプローチしますか？読みやすい解決策はありますか？コードを見て依存関係とその影響を理解できる限り、コードが多すぎても問題はありません。
コード例（今の私のコードのようなもの）：
HTML：
<select id="type">
<option value=1>a</option>
<option value=2>b</option>
</select>
<select id="numOfX">
</select>
<select id="numOfY">
</select>
js：
$("#type").change(function()
{
if($("#type").val() == 1)
{
$("#numOfX").append(new Option(1, "1", false, false));
$("#numOfX").append(new Option(2, "2", false, false));
}
else if($("#type").val() == 2)
{
$("#numOfX").append(new Option(1, "100", false, false));
$("#numOfX").append(new Option(2, "200", false, false));
}
});
$("#numOfX").change(function()
{
...
});