views:

50

answers:

2

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 that should be shown is this)

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

Santiago

Anyone has a clue why it isnt working?

+1  A: 

Capitalization matters!

Are you sure you don't mean:

hearValue == "Chile"
Ramblingwood
A: 

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>
Erikk Ross
Thx for the answers, It' didnt work though... I used the ('display', 'none') to see if it worked, first i tried with the val() but it reffused, and refused and refused. I guess it's probably disastrous DOM on my part so I'll just leave them displayed and populate them through mysql to give it some flare and ease the clients wrath on me. Thx anyways.
irenkai
I tested the code above and it worked fine for me. If you want to post your entire code somewhere that would probably help us figure out the problem.
Erikk Ross