How to show/hide div when we select 'all' option












0














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; }












share|improve this question




















  • 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
















0














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; }












share|improve this question




















  • 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














0












0








0


0





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; }












share|improve this question















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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














  • 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












3 Answers
3






active

oldest

votes


















-1














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();
}
});
});





share|improve this answer





















  • Thank you so much for your help, J. Almandos.
    – Meggi
    Nov 23 '18 at 12:31



















1














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>





share|improve this answer























  • 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





















0














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






share|improve this answer





















  • 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











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
});


}
});














draft saved

draft discarded


















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









-1














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();
}
});
});





share|improve this answer





















  • Thank you so much for your help, J. Almandos.
    – Meggi
    Nov 23 '18 at 12:31
















-1














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();
}
});
});





share|improve this answer





















  • Thank you so much for your help, J. Almandos.
    – Meggi
    Nov 23 '18 at 12:31














-1












-1








-1






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();
}
});
});





share|improve this answer












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();
}
});
});






share|improve this answer












share|improve this answer



share|improve this answer










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


















  • 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













1














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>





share|improve this answer























  • 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


















1














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>





share|improve this answer























  • 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
















1












1








1






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>





share|improve this answer














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>






share|improve this answer














share|improve this answer



share|improve this answer








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




















  • 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













0














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






share|improve this answer





















  • 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
















0














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






share|improve this answer





















  • 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














0












0








0






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






share|improve this answer












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







share|improve this answer












share|improve this answer



share|improve this answer










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


















  • 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


















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

What visual should I use to simply compare current year value vs last year in Power BI desktop

Alexandru Averescu

Trompette piccolo