How to show/hide div when we select 'all' option
I have a small requirement. I need to show and hide divs based on the option selected. Below is my code. Ho to show all green and red class div's when I select 'all' option. It works for red and green options. Thanks in advance.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colorselector">
<option>Choose Color</option>
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<script type="text/javascript">
$(function() {
$('#colorselector').change(function(){
$('.box').hide();
$('.' + $(this).val()).show();
});
});
</script>
.box{
color: #fff;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
jquery
add a comment |
I have a small requirement. I need to show and hide divs based on the option selected. Below is my code. Ho to show all green and red class div's when I select 'all' option. It works for red and green options. Thanks in advance.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colorselector">
<option>Choose Color</option>
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<script type="text/javascript">
$(function() {
$('#colorselector').change(function(){
$('.box').hide();
$('.' + $(this).val()).show();
});
});
</script>
.box{
color: #fff;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
jquery
2
Possible duplicate of show/hide div based on select option jquery
– dippas
Nov 23 '18 at 12:25
To Close Voters: This is not a duplicate of the proposed duplicate. The proposed duplicate is, like this question, a debugging question. While the title of the proposed duplicate makes it seem like it might be a duplicate, the issues in the two questions are completely different.
– Makyen
Nov 24 '18 at 0:20
add a comment |
I have a small requirement. I need to show and hide divs based on the option selected. Below is my code. Ho to show all green and red class div's when I select 'all' option. It works for red and green options. Thanks in advance.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colorselector">
<option>Choose Color</option>
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<script type="text/javascript">
$(function() {
$('#colorselector').change(function(){
$('.box').hide();
$('.' + $(this).val()).show();
});
});
</script>
.box{
color: #fff;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
jquery
I have a small requirement. I need to show and hide divs based on the option selected. Below is my code. Ho to show all green and red class div's when I select 'all' option. It works for red and green options. Thanks in advance.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colorselector">
<option>Choose Color</option>
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<script type="text/javascript">
$(function() {
$('#colorselector').change(function(){
$('.box').hide();
$('.' + $(this).val()).show();
});
});
</script>
.box{
color: #fff;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colorselector">
<option>Choose Color</option>
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<script type="text/javascript">
$(function() {
$('#colorselector').change(function(){
$('.box').hide();
$('.' + $(this).val()).show();
});
});
</script>
.box{
color: #fff;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colorselector">
<option>Choose Color</option>
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<script type="text/javascript">
$(function() {
$('#colorselector').change(function(){
$('.box').hide();
$('.' + $(this).val()).show();
});
});
</script>
.box{
color: #fff;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
jquery
jquery
edited Nov 24 '18 at 0:16
Makyen
20.4k83970
20.4k83970
asked Nov 23 '18 at 12:21
MeggiMeggi
63
63
2
Possible duplicate of show/hide div based on select option jquery
– dippas
Nov 23 '18 at 12:25
To Close Voters: This is not a duplicate of the proposed duplicate. The proposed duplicate is, like this question, a debugging question. While the title of the proposed duplicate makes it seem like it might be a duplicate, the issues in the two questions are completely different.
– Makyen
Nov 24 '18 at 0:20
add a comment |
2
Possible duplicate of show/hide div based on select option jquery
– dippas
Nov 23 '18 at 12:25
To Close Voters: This is not a duplicate of the proposed duplicate. The proposed duplicate is, like this question, a debugging question. While the title of the proposed duplicate makes it seem like it might be a duplicate, the issues in the two questions are completely different.
– Makyen
Nov 24 '18 at 0:20
2
2
Possible duplicate of show/hide div based on select option jquery
– dippas
Nov 23 '18 at 12:25
Possible duplicate of show/hide div based on select option jquery
– dippas
Nov 23 '18 at 12:25
To Close Voters: This is not a duplicate of the proposed duplicate. The proposed duplicate is, like this question, a debugging question. While the title of the proposed duplicate makes it seem like it might be a duplicate, the issues in the two questions are completely different.
– Makyen
Nov 24 '18 at 0:20
To Close Voters: This is not a duplicate of the proposed duplicate. The proposed duplicate is, like this question, a debugging question. While the title of the proposed duplicate makes it seem like it might be a duplicate, the issues in the two questions are completely different.
– Makyen
Nov 24 '18 at 0:20
add a comment |
3 Answers
3
active
oldest
votes
Since you'll only have one "all" option, you can do an "if" to check if that option was pressed:
$(function() {
$('#colorselector').change(function(){
if($(this).val()=="all"){
$('.box').show();
}else{
$('.box').hide();
$('.' + $(this).val()).show();
}
});
});
Thank you so much for your help, J. Almandos.
– Meggi
Nov 23 '18 at 12:31
add a comment |
Try this code:
<select id="colorselector">
<option>Choose Color</option>
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
Script:
<script type="text/javascript">
$(function() {
$('#colorselector').on('change', function() {
var data = $(this).val();
if( data =='red')
{
$('.green').hide();
$('.red').show();
}
else if($(this).val() =='green')
{
$('.green').show();
$('.red').hide();
}
else
{
$('.green').show();
$('.red').show();
}
});
});
</script>
Thanks for your time Bhoomi, but my question is different.
– Meggi
Nov 23 '18 at 12:47
check updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:55
When I select the Red option it shows only red class, the green option it shows only green class and when I select all option it should show both red and green classes.
– Meggi
Nov 23 '18 at 12:56
check my updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:58
Yes, it works Thank you Bhoomi. Here small change in your code -- if( data =='red') { $('.green').hide(); $('.red').show(); }
– Meggi
Nov 23 '18 at 12:59
add a comment |
Use an if statement to detect if the user is selecting 'all'. Please check the below code.
$(function() {
$('#colorselector').change(function(){
$('.box').hide();
//if user is selecting 'all', show all boxes
if($(this).val() == 'all'){
$('.box').show()
//otherwise only show the color they select
} else {
$('.' + $(this).val()).show();
}
});
});
Here is a working JS Fiddle Example
Thank for your time Shehara.
– Meggi
Nov 23 '18 at 12:43
No problem, if it worked please select as the answer, thanks
– Shehara
Nov 23 '18 at 12:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53446641%2fhow-to-show-hide-div-when-we-select-all-option%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Since you'll only have one "all" option, you can do an "if" to check if that option was pressed:
$(function() {
$('#colorselector').change(function(){
if($(this).val()=="all"){
$('.box').show();
}else{
$('.box').hide();
$('.' + $(this).val()).show();
}
});
});
Thank you so much for your help, J. Almandos.
– Meggi
Nov 23 '18 at 12:31
add a comment |
Since you'll only have one "all" option, you can do an "if" to check if that option was pressed:
$(function() {
$('#colorselector').change(function(){
if($(this).val()=="all"){
$('.box').show();
}else{
$('.box').hide();
$('.' + $(this).val()).show();
}
});
});
Thank you so much for your help, J. Almandos.
– Meggi
Nov 23 '18 at 12:31
add a comment |
Since you'll only have one "all" option, you can do an "if" to check if that option was pressed:
$(function() {
$('#colorselector').change(function(){
if($(this).val()=="all"){
$('.box').show();
}else{
$('.box').hide();
$('.' + $(this).val()).show();
}
});
});
Since you'll only have one "all" option, you can do an "if" to check if that option was pressed:
$(function() {
$('#colorselector').change(function(){
if($(this).val()=="all"){
$('.box').show();
}else{
$('.box').hide();
$('.' + $(this).val()).show();
}
});
});
answered Nov 23 '18 at 12:24
J. AlmandosJ. Almandos
1828
1828
Thank you so much for your help, J. Almandos.
– Meggi
Nov 23 '18 at 12:31
add a comment |
Thank you so much for your help, J. Almandos.
– Meggi
Nov 23 '18 at 12:31
Thank you so much for your help, J. Almandos.
– Meggi
Nov 23 '18 at 12:31
Thank you so much for your help, J. Almandos.
– Meggi
Nov 23 '18 at 12:31
add a comment |
Try this code:
<select id="colorselector">
<option>Choose Color</option>
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
Script:
<script type="text/javascript">
$(function() {
$('#colorselector').on('change', function() {
var data = $(this).val();
if( data =='red')
{
$('.green').hide();
$('.red').show();
}
else if($(this).val() =='green')
{
$('.green').show();
$('.red').hide();
}
else
{
$('.green').show();
$('.red').show();
}
});
});
</script>
Thanks for your time Bhoomi, but my question is different.
– Meggi
Nov 23 '18 at 12:47
check updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:55
When I select the Red option it shows only red class, the green option it shows only green class and when I select all option it should show both red and green classes.
– Meggi
Nov 23 '18 at 12:56
check my updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:58
Yes, it works Thank you Bhoomi. Here small change in your code -- if( data =='red') { $('.green').hide(); $('.red').show(); }
– Meggi
Nov 23 '18 at 12:59
add a comment |
Try this code:
<select id="colorselector">
<option>Choose Color</option>
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
Script:
<script type="text/javascript">
$(function() {
$('#colorselector').on('change', function() {
var data = $(this).val();
if( data =='red')
{
$('.green').hide();
$('.red').show();
}
else if($(this).val() =='green')
{
$('.green').show();
$('.red').hide();
}
else
{
$('.green').show();
$('.red').show();
}
});
});
</script>
Thanks for your time Bhoomi, but my question is different.
– Meggi
Nov 23 '18 at 12:47
check updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:55
When I select the Red option it shows only red class, the green option it shows only green class and when I select all option it should show both red and green classes.
– Meggi
Nov 23 '18 at 12:56
check my updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:58
Yes, it works Thank you Bhoomi. Here small change in your code -- if( data =='red') { $('.green').hide(); $('.red').show(); }
– Meggi
Nov 23 '18 at 12:59
add a comment |
Try this code:
<select id="colorselector">
<option>Choose Color</option>
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
Script:
<script type="text/javascript">
$(function() {
$('#colorselector').on('change', function() {
var data = $(this).val();
if( data =='red')
{
$('.green').hide();
$('.red').show();
}
else if($(this).val() =='green')
{
$('.green').show();
$('.red').hide();
}
else
{
$('.green').show();
$('.red').show();
}
});
});
</script>
Try this code:
<select id="colorselector">
<option>Choose Color</option>
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<div class="red box">You have selected <strong>red option</strong> so i am here</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
Script:
<script type="text/javascript">
$(function() {
$('#colorselector').on('change', function() {
var data = $(this).val();
if( data =='red')
{
$('.green').hide();
$('.red').show();
}
else if($(this).val() =='green')
{
$('.green').show();
$('.red').hide();
}
else
{
$('.green').show();
$('.red').show();
}
});
});
</script>
edited Nov 23 '18 at 13:01
answered Nov 23 '18 at 12:43
Bhoomi patelBhoomi patel
40016
40016
Thanks for your time Bhoomi, but my question is different.
– Meggi
Nov 23 '18 at 12:47
check updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:55
When I select the Red option it shows only red class, the green option it shows only green class and when I select all option it should show both red and green classes.
– Meggi
Nov 23 '18 at 12:56
check my updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:58
Yes, it works Thank you Bhoomi. Here small change in your code -- if( data =='red') { $('.green').hide(); $('.red').show(); }
– Meggi
Nov 23 '18 at 12:59
add a comment |
Thanks for your time Bhoomi, but my question is different.
– Meggi
Nov 23 '18 at 12:47
check updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:55
When I select the Red option it shows only red class, the green option it shows only green class and when I select all option it should show both red and green classes.
– Meggi
Nov 23 '18 at 12:56
check my updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:58
Yes, it works Thank you Bhoomi. Here small change in your code -- if( data =='red') { $('.green').hide(); $('.red').show(); }
– Meggi
Nov 23 '18 at 12:59
Thanks for your time Bhoomi, but my question is different.
– Meggi
Nov 23 '18 at 12:47
Thanks for your time Bhoomi, but my question is different.
– Meggi
Nov 23 '18 at 12:47
check updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:55
check updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:55
When I select the Red option it shows only red class, the green option it shows only green class and when I select all option it should show both red and green classes.
– Meggi
Nov 23 '18 at 12:56
When I select the Red option it shows only red class, the green option it shows only green class and when I select all option it should show both red and green classes.
– Meggi
Nov 23 '18 at 12:56
check my updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:58
check my updated answer@Meggi
– Bhoomi patel
Nov 23 '18 at 12:58
Yes, it works Thank you Bhoomi. Here small change in your code -- if( data =='red') { $('.green').hide(); $('.red').show(); }
– Meggi
Nov 23 '18 at 12:59
Yes, it works Thank you Bhoomi. Here small change in your code -- if( data =='red') { $('.green').hide(); $('.red').show(); }
– Meggi
Nov 23 '18 at 12:59
add a comment |
Use an if statement to detect if the user is selecting 'all'. Please check the below code.
$(function() {
$('#colorselector').change(function(){
$('.box').hide();
//if user is selecting 'all', show all boxes
if($(this).val() == 'all'){
$('.box').show()
//otherwise only show the color they select
} else {
$('.' + $(this).val()).show();
}
});
});
Here is a working JS Fiddle Example
Thank for your time Shehara.
– Meggi
Nov 23 '18 at 12:43
No problem, if it worked please select as the answer, thanks
– Shehara
Nov 23 '18 at 12:48
add a comment |
Use an if statement to detect if the user is selecting 'all'. Please check the below code.
$(function() {
$('#colorselector').change(function(){
$('.box').hide();
//if user is selecting 'all', show all boxes
if($(this).val() == 'all'){
$('.box').show()
//otherwise only show the color they select
} else {
$('.' + $(this).val()).show();
}
});
});
Here is a working JS Fiddle Example
Thank for your time Shehara.
– Meggi
Nov 23 '18 at 12:43
No problem, if it worked please select as the answer, thanks
– Shehara
Nov 23 '18 at 12:48
add a comment |
Use an if statement to detect if the user is selecting 'all'. Please check the below code.
$(function() {
$('#colorselector').change(function(){
$('.box').hide();
//if user is selecting 'all', show all boxes
if($(this).val() == 'all'){
$('.box').show()
//otherwise only show the color they select
} else {
$('.' + $(this).val()).show();
}
});
});
Here is a working JS Fiddle Example
Use an if statement to detect if the user is selecting 'all'. Please check the below code.
$(function() {
$('#colorselector').change(function(){
$('.box').hide();
//if user is selecting 'all', show all boxes
if($(this).val() == 'all'){
$('.box').show()
//otherwise only show the color they select
} else {
$('.' + $(this).val()).show();
}
});
});
Here is a working JS Fiddle Example
answered Nov 23 '18 at 12:40
SheharaShehara
1013
1013
Thank for your time Shehara.
– Meggi
Nov 23 '18 at 12:43
No problem, if it worked please select as the answer, thanks
– Shehara
Nov 23 '18 at 12:48
add a comment |
Thank for your time Shehara.
– Meggi
Nov 23 '18 at 12:43
No problem, if it worked please select as the answer, thanks
– Shehara
Nov 23 '18 at 12:48
Thank for your time Shehara.
– Meggi
Nov 23 '18 at 12:43
Thank for your time Shehara.
– Meggi
Nov 23 '18 at 12:43
No problem, if it worked please select as the answer, thanks
– Shehara
Nov 23 '18 at 12:48
No problem, if it worked please select as the answer, thanks
– Shehara
Nov 23 '18 at 12:48
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53446641%2fhow-to-show-hide-div-when-we-select-all-option%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Possible duplicate of show/hide div based on select option jquery
– dippas
Nov 23 '18 at 12:25
To Close Voters: This is not a duplicate of the proposed duplicate. The proposed duplicate is, like this question, a debugging question. While the title of the proposed duplicate makes it seem like it might be a duplicate, the issues in the two questions are completely different.
– Makyen
Nov 24 '18 at 0:20