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").s开发者_如何学Chow();
        } else if($("#selectbox").value == 'Input5') {
            $(".input5").show();
        }
    }
});

And here is a NOT working fiddle:

http://jsfiddle.net/rzMHJ/

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/

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