CODEWITHSUNDEEP
jquery
Allen
Allen

Reputation: 712

Show-Hide depending on select option

This seems like something straightforward, but this isn't working. The idea is to show something in a span tag, depending on a select statement..it works to hide the span but won't show the span. Is there something I'm missing?

Here is the select statement where the values are 1 or 0

<SELECT NAME="myname" id="showdesc">
    <OPTION VALUE="1">Yes</OPTION>
    <OPTION VALUE="0" >No</OPTION>
</SELECT>
<span id="secret">Some content</span>

Here is the jquery that looks for the values in the select statement

jQuery(document).on('change', '#showdesc', function() {
    if(jQuery(this).val() == '1'){
        jQuery('span').show('#secret');
    }else{
        jQuery('span').remove('#secret')};
});

Upvotes: 0

Views: 222

Answers (2)

Alex
Alex

Reputation: 35409

You're using the show method improperly.

First, select the proper element/s.

Then, apply the show/hide jQuery method:

Change:

if(jQuery(this).val() == '1')
{
    jQuery('span').show('#secret');
}
else
{
    jQuery('span').remove('#secret')
};

To:

if(jQuery(this).val() == '1')
{
    $('#secret').show();
}
else
{
    $('#secret').hide();
};

jQuery.show( [duration] [, easing] [, callback] )

Upvotes: 2

mickyjtwin
mickyjtwin

Reputation: 4990

You are calling .remove, which will remove the element from the DOM, which when you subsequently want to show, the item will not be available.

Instead, try:

jQuery('#secret').show();
jQuery('#secret').hide();

Upvotes: 1

Related Questions