javascript - 比赛括号形式

Question

创建一个用作表格的锦标赛分组。用户将从第一轮中选择获胜者，我希望每个前一轮都填充下一轮的下拉列表。我尝试了一些解决方案，但无法正常工作。下面是代码。

$(window).ready(function() {

        $('#G17W').on('click', function() {
            console.log($('.team').val());
            $('#G17W').html('');
            if ($('#G1W').val() == 1 && $('#G2W').val() == 8) {
                $('#G17W').append('<option value="">Select</option>');
                $('#G17W').append('<option value="NoDa Brewing">NoDa Brewing</option>');
                $('#G17W').append('<option value="Salud Cerveceria">Salud Cerveceria</option>');
            }
            else if ($('#G1W').val() == 1 && $('#G2W').val() == 9) {
                $('#G17W').append('<option value="">Select</option>');
                $('#G17W').append('<option value="NoDa Brewing">NoDa Brewing</option>');
                $('#G17W').append('<option value="Cabarrus Brewing Co.">Cabarrus Brewing Co.</option>');
            }
            else if ($('#G1W').val() == 16 && $('#G2W').val() == 8) {
                $('#G17W').append('<option value="">Select</option>');
                $('#G17W').append('<option value="Three Spirits Brewery">Three Spirits Brewery</option>');
                $('#G17W').append('<option value="Salud Cerveceria">Salud Cerveceria</option>');
            }
            else if ($('#G1W').val() == 1 && $('#G2W').val() == 9) {
                $('#G17W').append('<option value="">Select</option>');
                $('#G17W').append('<option value="Three Spirits Brewery">Three Spirits Brewery</option>');
                $('#G17W').append('<option value="Cabarrus Brewing Co.">Cabarrus Brewing Co.</option>');
            } else {
                $('#G17W').append('<option value="">Select</option>');
            }
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="G1W" name="G1W">
  <option value="">Select</option>
  <option value="1">NoDa Brewing</option>
  <option value="16">Three Spirits Brewery</option>
</select>

<select id="G2W" name="G2W">
  <option value="">Select</option>
  <option value="8">Salud Cerveceria</option>
  <option value="9">Cabarrus Brewing Co.</option>
</select>

<select id="G17W" name="G17W">
  <option value="">Select</option>
</select>

Answer 1

.html()

问题

$('#G17W').html('');每次都销毁所有选项 <select id='G17W'>被点击。如果单击并使用箭头键，它将更改为适当的选项。这当然是不可取的。

---

解决方案

1. 不要使用 append()更改标签任意次数。删除和添加标签等 DOM 操作成本很高。
2. 不要使用 .html()删除标签，除非您以后不打算添加任何标签。 .html()是破坏性的——如果有任何引用指向任何被破坏的标签，则引用仍然存在。这可能会导致不可预测的行为。
3. 添加空白 <options>并为每个 <option> 分配值和文本.与 DOM 操作不同，分配属性值和文本内容不太可能导致不利的副作用，而且成本也不高。为避免出现空白，当它们没有值(value)时隐藏它们，当它们有值(value)时显示文本。
4. 注册 change前两个事件<select>秒。当前两个中的任何一个 <select>变化，第三<select>也会。

---

演示

$(document).ready(function() {
  var t1 = `NoDa Brewing`;
  var t16 = `Three Spirits Brewery`;
  var t8 = `Salud Cerveceria`;
  var t9 = `Cabarrus Brewing Co.`;

  var g1 = $('#G1W');
  var g2 = $('#G2W');
  var g1g2 = $('#G1W, #G2W');
  var g17 = $('#G17W');

  g1g2.on('change', function() {
    var v1 = g1.val();
    var v2 = g2.val();

    if (v1 === '1') {
      g17.find('option').eq(1).val(t1).text(t1).show();
    } else if (v1 == '16') {
      g17.find('option').eq(1).val(t16).text(t16).show();
    }
    if (v2 === '8') {
      g17.find('option').eq(2).val(t8).text(t8).show();
    } else if (v2 == '9') {
      g17.find('option').eq(2).val(t9).text(t9).show();
    }
    if (v1 === '0') {
      g17.find('option').eq(1).val('').text('').hide();
    }
    if (v2 === '0') {
      g17.find('option').eq(2).val('').text('').hide();
    }
    g17.val('0');
    return;
  });
});

<select id="G1W" name="G1W">
  <option value="0">Select</option>
  <option value="1">NoDa Brewing</option>
  <option value="16">Three Spirits Brewery</option>
</select>

<select id="G2W" name="G2W">
  <option value="0">Select</option>
  <option value="8">Salud Cerveceria</option>
  <option value="9">Cabarrus Brewing Co.</option>
</select>

<select id="G17W" name="G17W">
  <option value="0">Select</option>
  <option value="" style='display:none'></option>
  <option value="" style='display:none'></option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>