1

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

<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，因此我只需要在类中循环正确数量的divs.item-details并添加类.state--visible。

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

编辑

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

4

2 回答 2

1

演示

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

于 2013-10-16T13:56:10.800 回答
1

你可以做：

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

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

于 2013-10-16T13:55:43.373 回答