triying to do a combo select with this.val() but it doesnt show the second select

Im triying to do a combo where the when the user selects Chile out of the select box, a second select shows up showing the cities. The jQuery code Im using is this.

$(document).ready(function() {
    var ciudad = $("#ciudad");
    ciudad.css("display","none");

    $("select#selectionpais").change(function() {
        var hearValue = $("select#selectionpais").val();
        if( hearValue == "chile") {
            ciudad.css("display","block");
        } else {
            ciudad.css("display","none");
        }
    });
});
​

and the Html is this (abreviated for the sake of understanding)

   <select name="pais" id="selectionpais">

.... Chile Afganistán

and the second select (the one t开发者_StackOverflow社区hat should be shown is this)

  <select id="ciudad" name="ciudad" class="ciudad">

Santiago

Anyone has a clue why it isnt working?

Capitalization matters!

Are you sure you don't mean:

hearValue == "Chile"

I think what Ramblingwood said is probably the problem. Although I did see some other problems in your code. It might have just been how you copy/pasted it. But there seemed to be a few extra brackets and semi colons. Here is a proper working version. Notice that I used the hide and show functions instead of changing the css display property.

    $(document).ready(function() {
    var ciudad = $("#ciudad");
    ciudad.hide();
       $("select#selectionpais").change(function(){
        var hearValue = $("select#selectionpais").val();
        if( hearValue == "chile")
            ciudad.show();
         else 
            ciudad.hide();
       });
    });

Here is the HTML:

<select name="pais" id="selectionpais">
    <option value="">Please choose</option>
    <option value="chile">Chile</option>
</select>
<select id="ciudad" name="ciudad" class="ciudad">
    <option value=""></option>
</select>