根据下拉条目显示/隐藏Div元素 [英] Show/Hide Div Elements based on dropdown entry

问题描述

我有4个Div元素和一个下拉列表.如果我选择诸如"2"之类的下拉选项，则会显示DivElement2，而其他所有选项都将被隐藏.

I have 4 Div elements, and a dropdown. If I select a dropdown option such as "2", DivElement2 is shown and all others are hidden.

我想更改它，以便当我选择选项"2"时，同时显示DivElement1和DivElement2.我猜想这将需要通过一些循环函数，但是我不确定该怎么做.

I want to change this, so that when I select option "2", both DivElement1 and DivElement2 are shown. I guess this would have to go through some loop function, but I'm not sure how to go about it.

<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，然后将其从希望显示的元素中删除.

---

This is the current jquery function that basically first adds hide to everything, and then removes it from the element it wishes to show.

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

谢谢大家！

推荐答案

无需循环:

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

jsFiddle示例

jsFiddle example

这篇关于根据下拉条目显示/隐藏Div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！