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

【问题标题】：Show/Hide Div Elements based on dropdown entry根据下拉条目显示/隐藏 Div 元素
【发布时间】：2014-09-15 05:06:21
【问题描述】：

我有 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 函数，它基本上首先将隐藏添加到所有内容，然后将其从要显示的元素中删除。

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

谢谢大家！

【问题讨论】：

所以如果你点击 3 会显示 div1、div2 和 div3？像这样？
如果选择了选项“3”会发生什么？什么时候选择“4”选项？
你好。 Nicolas 是正确的，j08691 已经发布了我想要的内容。感谢大家的帮助！

标签： jquery

【解决方案1】：

不需要循环：

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

jsFiddle example

【讨论】：

您好，感谢您的回答！不过我想了解一下，.CommontAttribute:lt 是什么，特别是 :lt 部分？我们不再需要使用DivElement#了吗？
:lt() 是小于选择器（从零开始）。基本上是说在这里选择第一个 X .CommonAttribute 元素。你也可以使用 DivElement#，但是你需要一个循环来获取小于 X 的项目。
谢谢！我一直无法让它工作，但是对我的代码进行了各种修改，所以我上传了我在这里的代码：jsfiddle.net/Hk87V/1。我注意到我收到了一个TypeError: $(...).chosen is not a function 错误，这是我没有的，但是除了jsfiddle 中缺少$(document).ready(function(){ 之外，代码完全相同。你知道那里出了什么问题吗？

【解决方案2】：

你可以试试这样的：

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

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

fiddle

【讨论】：