javascript - 根据下拉框选择显示/隐藏多个div

Question

我有一个组合框，其值分别为 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 上发现了一些 fiddle ，但它不能满足我的需要。

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

Answer 1

你可以这样做:

$(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>

希望这有帮助!!!