Javascript 比赛括号形式

创建一个将用作表单的锦标赛括号。用户将从第一轮中选择优胜者，我希望前一轮中的每一轮都填充下一轮的下拉列表。我尝试了一些解决方案，但都没能奏效。下面是代码

$（窗口）.ready（函数（）{
$（'#G17W'）。在（'click'，function（）上{
log（$（'.team'）.val（））；
$（'#G17W'）.html（''）；
如果（$（'#G1W'）.val（）==1&$（'#G2W'）.val（）==8）{
$（'#G17W'）。追加（'Select'）；
$（'#G17W'）。追加（'NoDa Brewing'）；
$（'#G17W'）。附加（'Salud Cerveceria'）；
}
如果（$（'#G1W'）.val（）==1&$（'#G2W'）.val（）==9）{
$（'#G17W'）。追加（'Select'）；
$（'#G17W'）。追加（'NoDa Brewing'）；
$（'G17W'）。追加（'Cabarrus Brewing Co.）；
}
如果（$（'#G1W'）.val（）==16&$（'#G2W'）.val（）==8）{
$（'#G17W'）。追加（'Select'）；
$（#G17W'）。附加（'Three Spirits Brewery'）；
$（'#G17W'）。附加（'Salud Cerveceria'）；
}
如果（$（'#G1W'）.val（）==1&$（'#G2W'）.val（）==9）{
$（'#G17W'）。追加（'Select'）；
$（#G17W'）。附加（'Three Spirits Brewery'）；
$（'G17W'）。追加（'Cabarrus Brewing Co.）；
}否则{
$（'#G17W'）。追加（'Select'）；
}
});
});

挑选
野田啤酒
三酒啤酒厂
挑选
鹿茸
卡巴鲁斯酿酒公司。
挑选
根据您的问题，代码似乎很好。尝试运行精确的代码后，它将按预期返回输出。您可以尝试运行代码下面的代码段。如果您的问题是其他问题，请详细说明

我认为有一个优化上述代码的范围

干杯

问题
$（'#G17W'）.html（''）
时，code>都会销毁所有选项。如果单击并使用箭头键，它将更改为相应的选项。这当然是不可取的


解决方案
不要使用
append（）
任意次数更改标记。删除和添加标记等DOM操作成本高昂
不要使用
.html（）
删除标记，除非以后不打算添加任何标记
.html（）
是破坏性的——如果有任何引用指向任何已破坏的标记，则引用将保留。这可能导致不可预测的行为
添加空白
，只需为每个
分配值和文本即可。与DOM操作不同，分配属性值和文本内容不太可能引起不良副作用，成本也不高。为了避免出现空白，请在空白没有值时隐藏它们，然后在空白有值时显示文本
在前两个
上注册
change
事件。当前两个
中的任何一个发生变化时，第三个
也会发生变化

演示

$（文档）.ready（函数（）{
var t1=`NoDa Brewing`；
var t16=‘三烈酒啤酒厂’；
变量t8=`Salud Cerveceria`；
var t9=‘卡巴鲁斯酿酒公司’；
变量g1=$（“#G1W”）；
var g2=$（“#G2W”）；
变量g1g2=$（'G1W，'G2W'）；
变量g17=$（“#G17W”）；
g1g2.on（'change'，function（）{
var v1=g1.val（）；
var v2=g2.val（）；
如果（v1=='1'）{
g17.find（'option'）.eq（1）.val（t1）.text（t1.show（）；
}否则如果（v1='16'）{
g17.find（'option'）.eq（1）.val（t16）.text（t16.show（）；
}
如果（v2=='8'）{
g17.find（'option'）.eq（2）.val（t8）.text（t8.show（）；
}否则如果（v2='9'）{
g17.find（'option'）.eq（2）.val（t9）.text（t9.show（）；
}
如果（v1=='0'）{
g17.find（'option'）.eq（1）.val（''）.text（''）.hide（）；
}
如果（v2=='0'）{
g17.find（'option'）.eq（2）.val（''）.text（''）.hide（）；
}
g17.val（'0'）；
返回；
});
});

挑选
野田啤酒
三酒啤酒厂
挑选
鹿茸
卡巴鲁斯酿酒公司。
挑选
第三个下拉列表不允许您选择选项。