根据下拉框选择显示/隐藏多个 div答案

【问题标题】：show/hide multiple divs based on dropdown box selection根据下拉框选择显示/隐藏多个 div
【发布时间】：2015-11-05 22:15:00
【问题描述】：

我有一个组合框，其值分别为 1、2、3 和 4。我还有 4 个 div，分别命名为 div1、div2、div3 和 div4。

我想要一个符合以下条件的 javascript： - 当从组合框中选择值 1 时，它应该显示 div1 - 从组合框中选择值 2 时，应显示 div1 和 div2 - 从组合框中选择值 3 时，应显示 div1、div2 和 div3 - 从组合框中选择值 4 时，应显示 div1、div2、div3 和 div4 - 再次，如果单击组合框中的值 2，它应该会自动隐藏 div3 和 div4，并且应该只显示 div1 和 div2

我在 stackoverflow 上发现了一些问题，但它不能满足我的需要。

我努力做到这一点，但最后我切换了一个 div。

【问题讨论】：

请分享你目前尝试过的代码
@abtpst jsfiddle.net/J24yN/420

标签： javascript jquery html css combobox

【解决方案1】：

试试这个。这将让您按顺序显示 div。

$('div').hide();
$('select').click(function()
{ 
    var targetDiv = $("#div" + $(this).val());
    var prevDiv = $($("#div" + $(this).val())).prev('div');
    if($(this).val() == "1" || prevDiv.is(":visible") )
      $("#div" + $(this).val()).show();

});

http://jsfiddle.net/o5y9959b/3/

更新：

为了在第一个 div 之前显示具有组合选择值的项目，只需以相反的顺序执行 for 循环。

$('div').hide();
$('select').click(function()
{ 
    $('div').hide(); // remove this if you don't want to hide all of them 
    for(var i = $(this).val() ; i >= 1 ; i--)
        $("#div" + i).show();      
});

http://jsfiddle.net/o5y9959b/6/

【讨论】：

在您的示例中，当我单击 4 时，它会显示 div1、div2、div3 和 div4。同样，如果我单击 2，那么所有 div 都应该隐藏并且应该只显示 div1 和 div2。在您的示例中，即使我点击 2，所有 4 个 div 都会保留
刚刚更新了解决方案。试试新的小提琴。
它不像我描述的那样工作。通过从 4 到 1 向后单击来尝试您的示例
你需要的更简单。查看更新。基本思想是执行 for 循环，但顺序相反。这将完全消除 switch 或 if-else 语句的需要。
谢谢伙计。该解决方案就像一个魅力。我不知道如果没有 if-else 语句就可以做到这一点。再次感谢。

【解决方案2】：

试试这个 - 单选按钮可以帮助控制状态，您可以相应地显示这些 div。这是一篇关于单选按钮黑客的好文章http://alistapart.com/article/radio-controlled-web-design

【讨论】：

【解决方案3】：

这可以使用on change event 来实现。

$(document).on('change','#combobox',function(){
    var selected = $("#combobox option:selected").val;
    switch(selected){
        case '1': /* do something */ break;
        case '2': /* do something */ break;
        case '3': /* do something */ break;
        default: break;
    }
})

【讨论】：

您可以使用 if 语句代替 switch，但 switch 似乎更快地键入。 XD

【解决方案4】：

你可以这样做：

$(document).on('change','#combobox',function(){
    var selected = $("#combobox option:selected");
    if ($("#div" + selected.val()).length > 0) {
    	$("#div" + selected.val()).prevAll().show();
        $("#div" + selected.val()).nextAll().hide();
        $("#div" + selected.val()).show();
	}
    else {
        $('.container > div').show();
    }
});

div {
    height: 30px;
}
#div1 {
    background-color:green;
}

#div2 {
    background-color:orange;
}

#div3 {
    background-color:blue;
}

#div4 {
    background-color:red;
}

#div5 {
    background-color:#c23abc;
}

#div6 {
    background-color:#c2da2c;
}

#div7 {
    background-color:#e26ab1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="combobox" name="select">
  <option value="all">Show all</option> 
  <option value="1">Show till div 1</option> 
  <option value="2">Show till div 2</option>
  <option value="3">Show till div 3</option>
  <option value="4">Show till div 4</option>
  <option value="5">Show till div 5</option>
  <option value="6">Show till div 6</option>
  <option value="7">Show till div 7</option>
    
</select>
<div class="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    <div id="div6"></div>
    <div id="div7"></div>
</div>

希望对你有帮助！！！

【讨论】：