Show/Hide divs on form submit

I have worked out about 90% of this, but can't seem to get the last 10%:

I have a form that asks the user to select a location. On select, I want the page (and the request form) to fade in opacity, and a new div to fade up on top with pricing information.

Right now, everything works as expected for the first selected option (novato), but on any other option in the list, the page and request form divs both fade out, and the new pricing div isn't visible.

I'm stumped, and pretty sure I'm just missing something stupid (being a newbie). Any help is appreciated!

the request form:

<form id="locations">
<select>
<option>Choose a location</option>
<option></option>
<option id="novato" value="novato">Novato</option>
<option id="sanleandro" value="sanleandro">San Leandro</option>
<option id="livermore" value="livermore">Livermore</option>
<option id="sanjose" value="sanjose">San Jose</option>
</select>
<input type="submit" id="submit" value="go"/>
</form>

The JS:

> $(function() {
>   $("#locations").submit(function() {
>       if ($("#novato").attr("selected")) {
>           $("#pricing_novato").fadeIn("normal");
>           $("#page").fadeTo("normal", 0.1);
>           $("#pricing_novato").css({top:"0",left:"50%",margin:"20px
> 0 0 -"+($("#pricing_novato").width() /
> 2)+"px"});
>           $("#pricing_selector").fadeOut("normal");       
           }else if($("#sanleandro").attr("selected")) {
>           $("#pricing_sanleandro").fadeIn("normal");
>           $("#page").fadeTo("normal", 0.1);
>           $("#pricing_sanleandro").css({top:"0",left:"50%",margin:"20px
> 0 0
> -"+($("#pricing_sanleandro").width() / 2)+"px"});
>           $("#pricing_selector").fadeOut("normal");       
           }else if($("#livermore").attr("selected")) {
>           $("#pricing_livermore").fadeIn("normal");           $("#page").fadeTo("normal", 0.1);
>           $("#pricing_livermore").css({top:"0",left:"50%",margin:"20px
> 0 0
> -"+($("#pricing_livermore").width() / 2)+"px"});
>           $("#pricing_selector").fadeOut("normal");       
           }else if($("#sanjose").attr("selected")) {
>           $("#pricing_sanjose").fadeIn("normal");
>           $("#page").fadeTo("normal", 0.1);
>           $("#pricing_sanjose").css({top:"0",left:"50%",margin:"20px
> 0 0 -"+($("#pricing_sanjose").width()
> / 2)+"px"});
>           $("#pricing_selector").fadeOut("normal");       
           } 
  }); 
});

The divs:

<div id="pricing_novato">content</div>
<div id="pricing_sanleandro">content</div>
<div id="pr开发者_如何转开发icing_livermore">content</div>
<div id="pricing_sanjose">content</div>

I just created a jsfiddle with your code: http://jsfiddle.net/Efb32/6/.

I changed a few things, take a look at the code: added some styles, changed the css(...) changes so it fits, added return false to the form submit code so it works in jsfiddle and added the #page and #pricing_selector divs that are used in the code. It seems to behave the same for all 4 options.

I guess I given the output I don't see what is the problem - can you check if the code on jsfiddle behaves logically as you expect or not?

Have you tried assigning the currently selected option to a variable and then test for that instead?

var selectedLocation = $("select option:selected").val();

Also, if #page is your container, won't doing this:

$("#page").fadeTo("normal", 0.1);

Fade out everything contained within the container? I only assumed because I can't see it in your code.

You could also try putting some console logging or simply alert the values you are trying to test to give you an idea of what's happening in your code