根据下拉选择显示/隐藏 div - jquery

Question

So i am tryign to make a timeline, where if you select an item from a dropdown selection box it will display only the information from that selection (era).所以我试着制作一个时间线，如果你从下拉选择框中选择一个项目，它将只显示来自该选择（时代）的信息。 I found this Code which lets me do just that, but once i added a few thigns of my own, it stopped working.我发现这个代码可以让我做到这一点，但是一旦我添加了一些我自己的东西，它就停止工作了。 i was wondering why this is happening, and what could be done to fix it.我想知道为什么会发生这种情况，以及可以做些什么来解决它。 Full Code:完整代码：

<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
    $(this).find("option:selected").each(function(){
        if($(this).attr("value")=="red"){
            $(".box").not(".red").hide();
            $(".red").show();
        }
        else if($(this).attr("value")=="green"){
            $(".box").not(".green").hide();
            $(".green").show();
        }
        else if($(this).attr("value")=="blue"){
            $(".box").not(".blue").hide();
            $(".blue").show();
        else if($(this).attr("value")=="maroon"){
            $(".box").not(".maroon").hide();
            $(".maroon").show();
        else if($(this).attr("value")=="magenta"){
            $(".box").not(".magenta").hide();
            $(".magenta").show();
        }
        else{
            $(".box").hide();
        }
    });
}).change();
});
</script>
</head>
<body>
<div>
    <select>
        <option>Choose Color</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
        <option value="maroon">maroon</option>
        <option value="magenta">magenta</option>
    </select>
</div>
<div class="red box">
</div>
<div class="green box">hello</div>
<div class="blue box">talofa</div>
<div class="maroon box"> <h2>BURGANDY!</h2></div>
<div class="magenta box"> <h2>PINK!</h2></div>

EDIT: I am extremely new to JS and JQuery (Like, Never used either of them before), so explanations are appreciated!编辑：我对 JS 和 JQuery 非常陌生（比如，以前从未使用过它们中的任何一个），因此感谢解释！

Answer 1

You have several syntax errors . 您有几个syntax错误。 You are not closing the else if with } . else if使用}则不会关闭else if 。 You may want to check console for those. 您可能需要检查console 。

Also, not sure why you are doing $(this).find("option:selected").each(function(){... since there can be only one option selected at any given time. 另外，不确定为什么要执行$(this).find("option:selected").each(function(){...因为在任何给定时间只能选择一个选项。

Here is the working code. 这是工作代码。

 $(document).ready(function() { $("select").change(function() { var color = $(this).val(); if (color == "red") { $(".box").not(".red").hide(); $(".red").show(); } else if (color == "green") { $(".box").not(".green").hide(); $(".green").show(); } else if (color == "blue") { $(".box").not(".blue").hide(); $(".blue").show(); } else if (color == "maroon") { $(".box").not(".maroon").hide(); $(".maroon").show(); } else if (color == "magenta") { $(".box").not(".magenta").hide(); $(".magenta").show(); } else { $(".box").hide(); } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <select> <option>Choose Color</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="maroon">maroon</option> <option value="magenta">magenta</option> </select> </div> <div class="red box"> </div> <div class="green box">hello</div> <div class="blue box">talofa</div> <div class="maroon box"> <h2>BURGANDY!</h2> </div> <div class="magenta box"> <h2>PINK!</h2> </div>

Answer 2

You're missing some closing brackets near the else's. 您在其他的附近缺少一些右括号。 Find a good javascript IDE, something like sublime , also make sure you read the console messages. 找到一个不错的javascript IDE（例如sublime），并确保您阅读了控制台消息。

 $(document).ready(function(){ $("select").change(function(){ $(this).find("option:selected").each(function(){ if($(this).attr("value")=="red"){ $(".box").not(".red").hide(); $(".red").show(); }else if($(this).attr("value")=="green"){ $(".box").not(".green").hide(); $(".green").show(); }else if($(this).attr("value")=="blue"){ $(".box").not(".blue").hide(); $(".blue").show(); }else if($(this).attr("value")=="maroon"){ $(".box").not(".maroon").hide(); $(".maroon").show(); }else if($(this).attr("value")=="magenta"){ $(".box").not(".magenta").hide(); $(".magenta").show(); }else{ $(".box").hide(); } }); }).change(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <select> <option>Choose Color</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="maroon">maroon</option> <option value="magenta">magenta</option> </select> </div> <div class="red box">Redish!</div> <div class="green box">hello</div> <div class="blue box">talofa</div> <div class="maroon box"> <h2>BURGANDY!</h2></div> <div class="magenta box"> <h2>PINK!</h2></div>

Answer 3

Other answers explained the typo.其他答案解释了错字。

Here is a simpler version这是一个更简单的版本

Fixed the code and added initial hide all css修复了代码并添加了初始隐藏所有 css

 $(function() { $("select").on("change", function() { const val = this.value $(".box").not("." + val).hide(); $("." + val).show(); }).change(); });

 .box { display: none; } .red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } .maroon { background-color: maroon; } .magenta { background-color: magenta; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <select> <option>Choose Color</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="maroon">maroon</option> <option value="magenta">magenta</option> </select> </div> <div class="red box">Red</div> <div class="green box">Green</div> <div class="blue box">Blue</div> <div class="maroon box"> <h2>Maroon!</h2> </div> <div class="magenta box"> <h2>Magenta!</h2> </div>

Answer 4

Try this: 尝试这个：

$(document).ready(function(){
  // Use className or Id instead of direct tag name
  $('.choose-color').on('change', function() {
    var val = $(this).val();
    var box = $('.box');

    box.hide(); // hide all boxes

    $('.' + val).show(); // show the current one

  })
});

Ref: http://jsbin.com/zocipil/edit?html,output 参考： http : //jsbin.com/zocipil/edit?html，输出

根据下拉选择显示/隐藏 div - jquery

问题描述

4 个解决方案

解决方案1
3 已采纳 2016-05-31 04:04:05

解决方案2
1 2016-05-31 04:03:23

解决方案3
0 2021-07-12 07:51:24

解决方案4
-1 2016-05-31 06:21:38

根据下拉选择显示/隐藏 div - jquery

问题描述

4 个解决方案

解决方案1 3 已采纳 2016-05-31 04:04:05

解决方案2 1 2016-05-31 04:03:23

解决方案3 0 2021-07-12 07:51:24

解决方案4 -1 2016-05-31 06:21:38

解决方案1
3 已采纳 2016-05-31 04:04:05

解决方案2
1 2016-05-31 04:03:23

解决方案3
0 2021-07-12 07:51:24

解决方案4
-1 2016-05-31 06:21:38