CODEWITHSUNDEEP
javascriptjquery
jQuerybeast
jQuerybeast

Reputation: 14500

jQuery: FadeIn a selected value on click

I have a selected box with 5 values. I'm trying to fadeIn inputs of what is selected in the box. For example: If input1 is selected, fade in input1 on click.

Here is what I'm trying to do:

$(document).ready(function(){
    $('.btn').click(function() {
               if($("#selectbox").value == 'Input1') {
            $(".input1").show();
        } else if($("#selectbox").value == 'Input2') {
            $(".input2").show();
        } else if($("#selectbox").value == 'Input3') {
            $(".input3").show();
        } else if($("#selectbox").value == 'Input4') {
            $(".input4").show();
        } else if($("#selectbox").value == 'Input5') {
            $(".input5").show();
        }
    }
});

And here is a NOT working fiddle:

http://jsfiddle.net/rzMHJ/

Upvotes: 1

Views: 646

Answers (2)

codeandcloud
codeandcloud

Reputation: 55248

Your code have two errors and that's why its not working.

  1. $("#selectbox").value should be $("#selectbox").val()
  2. you have not closed your click event with );

Also its much better to use switch case in this example.

Working Demo: http://jsfiddle.net/naveen/Zn2yy/

Update (based on Nick Cravers comment)

For this particular scenario you could simplify code a lot like this.
Demo: http://jsfiddle.net/nick_craver/BWacA/

Upvotes: 2

Peter Olson
Peter Olson

Reputation: 142947

There are two problems with your code that is causing it to fail.

First, replace .value with the jQuery function val().

Second, add ); to the second to last } at the end.

Here is working refactored code:

$(document).ready(function() {
    $('.btn').click(function() {
        var show = "." + $("#selectbox").val().toLowerCase();
        $(show).fadeIn();
    });
});

Upvotes: 1

Related Questions