javascript - 通过更改事件添加/减去框的选项

Question

我有两个选择框。我想根据用户在第一个选择框中选择的选项内的值填充第二个选择框的选项数。因此，例如，第一个选择框的选项(具有值)范围为 1-3。如果用户选择第二个选项，第二个选择框中应该有 2 个选项。如果选择第三个选项，则有三个选项。如果选择第一个，则应该只有一个选项。

我已经设法使用 change 事件填充第二个选择框，但我正在尝试弄清楚如何删除多余的选项。到目前为止，它只是附加选项(应该如此)。因此，例如，如果我选择了第三个选项并更改回第一个选项，则应删除 2 和 3。

HTML

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>  


<select></select>  

JS

$(function() {
  $('select:eq(0)').on('change', function() {
    for (var i = 1; i <= $('select:eq(0) option:selected').val(); i++) {
      $('select(1)').append('<option val="' + i + '">' + i + '</option>');
    }
  });
});

Answer 1

你可以使用 empty() 来做到这一点:

$(function () {
    $('select:eq(0)').on('change', function () {
        $('select:eq(1)').empty();
        for (var i = 1; i <= $(this).val(); i++) {
            $('select:eq(1)').append('<option val="' + i + '">' + i + '</option>');
        }
    });
});

但你也可以这样做:

$(function () {
    $('select:eq(0)').on('change', function () {
        $('select:eq(1)').html($(this).find('option:selected').prevAll().addBack().clone());
    });
});

-DEMO-

关于性能，我会改用它:{甚至认为使用文档片段可能比字符串连接更快，对此我真的不确定...}

$(function () {
    var select1 = $('select')[1];
    $('select').eq(0).on('change', function () {
        for (var i = 1, z = this.value, str = ""; i <= z; i++) {
            str += '<option val="' + i + '">' + i + '</option>';
        }
        select1.innerHTML = str;
    });
});

-DEMO-