Menu
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!
577
asked Apr 24 '26 03:04
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.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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
