Javascript 如何根据选择值循环（并显示）一系列元素

我在一张表格上有一个问题，询问某个产品需要多少：

<select name="select-number" id="select-number">
    <option value="">Please select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

根据这个问题的答案，我想为本例中的每个选项显示一个后续部分，将显示0到3个部分：

<div class="item-details" id="item-1">
    Follow-up questions item 1
</div>

<div class="item-details" id="item-2">
    Follow-up questions item 2
</div>

<div class="item-details" id="item-3">
    Follow-up questions item 3
</div>

我已经设置了CSS，所以我只需要使用class.item细节循环正确数量的div，并添加class.state visible

实现这一目标最有效的方法是什么？我想我需要一个基于select值的for循环，但到目前为止我失败了。我的代码可以看到。干杯

编辑

我想我解释得不太清楚。我需要循环并显示前面的所有部分，而不是根据所选的选项显示一个部分。因此，如果我从下拉列表中选择选项2，则item-1和item-2都应显示.item details类的前两个实例。

您可以执行以下操作：

$("#select-number").change(function() {
    $(".item-details").hide(); //hide all others
    $("#item-" + this.value).show();
});

小提琴：

---

这样做的好处是它稍微灵活一些。它不依赖于选项值是数字和连续的。例如，您可以将item-aaa与之配对。

假设item-x ID是唯一的，就像它们应该是唯一的一样，您可能可以安全地取消对长度的检查，只使用$'item-'+number.show；。jQuery将只显示它找到的第一个项。是的，可以安全地删除检查，它仅在您不想调用时才有用。显示目标元素不存在的时间，例如item-9。如果没有检查，它不会出错，所以实际上没有什么区别。请检查我的编辑，更好地解释我要实现的目标。@CherryFlavourPez更新了答案并演示了如何做到这一点。@MrCode-我使用slice:details.removeClass'state-visible.slice0，number.addClass'state-visible'实现了同样的目标；。你知道哪个更有效，这个循环还是for循环？这是一个有点没有意义的工作都非常快，我只是好奇。

$('#select-number').change(function() {
    var details = $('.item-details'),
        number = $(this).val();

    details.removeClass('state--visible');

    for(var i=1; i<=number; i++){
        $('#item-' + i).addClass('state--visible');   
    }

}).change();

$.each(this.options, function(i, val){
    $('#item-' + val.value).addClass('state--visible');   
    if(val.value == number){
        return false;
    }
});