javascript - 如何根据选择值循环(并显示)一系列元素

Question

我有一个关于需要多少特定产品的表格的问题:

<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，因此我只需要使用类 .item-details 遍历正确数量的 div 并添加类 .state--可见。

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

编辑

我认为我没有很好地解释自己。我不仅需要根据所选选项显示一个部分，还需要遍历并显示之前的所有部分。因此，如果我从下拉列表中选择选项 2，则 #item-1 和 #item-2 都应该显示(.item 的前两个实例-详细信息类。

Answer 1

Demo

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

另一种方法是:(替换上面的 for 循环):

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

这样做的好处是它稍微更灵活。它不依赖于数字和连续的选项值。所以你可以有例如 <option value="aaa">与 #item-aaa 配对.