javascript - Showhide divs based on dropdown selection - jquery - Stack Overflow

IT技术

更新时间：2025-03-100

admin管理员组
文章数量:1296472

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!

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!

Share edited May 31, 2016 at 4:02 asked May 31, 2016 at 3:54 user6402722 851 gold badge2 silver badges9 bronze badges

You're missing some closing brackets near the else's – Pedro Lobito Commented May 31, 2016 at 4:02
OMFG. i feel retarded. Thanks dude! it's bee a long day trying to learn JS xD Thanks so much – user6402722 Commented May 31, 2016 at 4:05
It happens to everyone, GL! – Pedro Lobito Commented May 31, 2016 at 4:09

Add a ment |

4 Answers 4

Sorted by: Reset to default 4

You have several syntax errors . You are not closing the else if with }. You may want to check console for those.

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.

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./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>

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.

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

Other answers explained the typo.

Here is a simpler version

Fixed the code and added initial hide all 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./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>

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./zocipil/edit?html,output

本文标签： javascriptShowhide divs based on dropdown selectionjqueryStack Overflow

版权声明：本文标题：javascript - Showhide divs based on dropdown selection - jquery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1741601399a2387722.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Showhide divs based on dropdown selection - jquery - Stack Overflow

4 Answers 4

更多相关文章