通过更改事件添加/减去框的选项答案

【问题标题】：Adding / Subtracting options of a box through a change event通过更改事件添加/减去框的选项
【发布时间】：2015-01-21 15:28:10
【问题描述】：

我有两个选择框。我想根据用户在第一个选择框中选择的选项内的值填充第二个选择框的选项数。因此，例如，第一个选择框的选项（带有值）范围为 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>

$(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>');
    }
  });
});

【问题讨论】：

标签： javascript jquery html

【解决方案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-

【讨论】：

不知道空存在，一直用html("")好点
你觉得这两个哪个更便宜？
如果性能很重要，我会说不要使用它们中的任何一个。我会用更高效的方式更新答案。
我认为必须为每个更改事件运行一个 for 循环会更昂贵，但这里可能不是这种情况（参考您的第三个选项）？
@CarlEdwards prevAll() 在内部使用while 循环，因此那里仍然存在循环。无论如何，如果不以某种方式循环，您将无法获得所有特定元素。就是说，如果你没有一千个可供复制的选项，就用你觉得最易读的方法

【解决方案2】：

你可以清除第二个选择的内部 html

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

【讨论】：