Issue
I facing a problem in HTML and JavaScript, when I select color it's work fine but when I select any Cell option red box and its disappear from screen also check my screen shot.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Select Box</title>
<style>
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).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>
</select>
</div>
<div class="red box">
<select>
<option>Cell One</option>
<option>Cell Two</option>
<option>Cell Three</option>
<option>Cell Four</option>
</select>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>You can also run this code live on https://www.tutorialrepublic.com/codelab.php
Solution
You select both selectors with sigle query. I would give individual ID or Class to selectors to resolve the conflict.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Show Hide Elements Using Select Box</title>
<style>
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red {
background: #ff0000;
}
.green {
background: #228b22;
}
.blue {
background: #0000ff;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
$("#color-selector")
.change(function () {
$(this)
.find("option:selected")
.each(function () {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box")
.not("." + optionValue)
.hide();
$("." + optionValue).show();
} else {
$(".box").hide();
}
});
})
.change();
});
</script>
</head>
<body>
<div>
<select id="color-selector">
<option>Choose Color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="red box">
<select>
<option>Cell One</option>
<option>Cell Two</option>
<option>Cell Three</option>
<option>Cell Four</option>
</select>
</div>
<div class="green box">
You have selected <strong>green option</strong> so i am here
</div>
<div class="blue box">
You have selected <strong>blue option</strong> so i am here
</div>
</body>
</html>Answered By - Max Tuzenko
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.