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

实现这一目标的最有效方法是什么？我想我需要根据我的选择值进行for循环，但到目前为止我失败了。我的代码可以看到in this jsFiddle。欢呼声。

修改

我认为我没有很好地解释自己。我不需要根据所选的选项显示一个部分，而是需要循环显示所有前面的部分。因此，如果我从下拉列表中选择选项2，则应显示#item-1和#item-2（.item-details类的前两个实例。

Answer 1

你可以这样做：

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

小提琴：http://jsfiddle.net/gLWBe/2/

Answer 2

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配对。

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

2 个答案: