比赛支架形式

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

根据您的问题，代码似乎很好。尝试运行确切的代码，它将按预期返回输出。您可以通过运行代码下方的代码段进行尝试。请详细说明您的要求是否其他。

应该对上述代码进行优化。

干杯。

Answer 2

.html()

问题

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

---

解决方案

1. 请勿使用append()任意更改标签。诸如删除和添加标签之类的DOM操作成本很高。
2. 请勿使用.html()删除标签，除非您不打算随后添加任何标签。 .html()是破坏性的-如果有任何引用指向任何已破坏的标签，则这些引用将保留。这可能导致无法预测的行为。
3. 添加空白<options>，然后为每个<option>分配值和文本。与DOM操作不同，分配属性值和文本内容不太可能引起不利的副作用，也不是那么昂贵。为避免出现空白，请在没有价值的情况下将其隐藏，并在文本显示时将其隐藏。
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>