Question

我有4个Div元素和一个下拉列表。如果我选择下拉选项（例如“2”），则会显示DivElement2，而其他所有内容都会隐藏。

我想更改此选项，因此当我选择选项“2”时，会显示DivElement1和DivElement2。我想这必须通过一些循环函数，但我不知道该怎么做。

<select name="Count">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
</select>

<div class="CommonAttribute DivElement1">Div1</div>
<div class="CommonAttribute DivElement2">Div2</div>
<div class="CommonAttribute DivElement3">Div3</div>
<div class="CommonAttribute DivElement4">Div4</div>

这是当前的jquery函数，它基本上首先将hide添加到所有内容中，然后将其从它希望显示的元素中删除。

if($(this).attr('name') == 'Count')
            {
                $('.CommonAttribute').addClass('hide');
                $('.DivElement' + $(this).val()).removeClass('hide');
            }

谢谢大家！

Answer 1

不需要循环：

$('.CommonAttribute').hide();
$('select[name="Count"]').change(function () {
    $('.CommonAttribute').hide();
    $('.CommonAttribute:lt(' + $(this).val() + ')').show()
})

<强> jsFiddle example

Answer 2

您可以尝试这样的事情：

<强> JS

$("select").on("change",
               function(){
                   $("div").hide();
                   show(parseInt($(this).val()));
               });

function show(counter){            
            for(var i=1; i<=counter; i++){
                $(".DivElement"+i).show();
            }
}

fiddle

根据下拉条目显示/隐藏Div元素

2 个答案: