toggle visiblity of options in a dropdown list on the selection in another dropdown

Question

I want to know how to toggle visiblity of options in a dropdown list on the basis of what we select in another dropdown.

eg: consider a dropdown named continent with options:

  asia, europe, america, africa.

now consider another dropdown named country with countries as options. What i require is that if i select asia from dropdown continent only the countries in asia must be visible in the dropdown country.

I am not able to make this work. pls help me.

Answer 1

Take a look at this: not exact the same but it is an start :)

http://jsfiddle.net/Diabl0570/M82JF/4/

Answer 2

Here is another example, simpler than the link (that I also +1d) in the comments

http://jsfiddle.net/joevallender/Y6Rjz/1/

Code below

HTML

<label for="continent">Continent</label>
<select id="continent">
    <option value=""> -- Please select -- </option>
    <option value="asia">Asia</option>
    <option value="europe">Europe</option>
</select>

<label for="country">Country</label>
<select id="country"></select>

JS

var data = {
    asia: [
         'china',
         'japan'
    ],
    europe: [
         'france',
         'germany'
    ]
}

$('#continent').change(function(){
    var value = $(this).val();
    var list = data[value];
    $('#country').empty();
    $('#country').append(new Option(' -- Please select -- ',''));
    for(var i = 0; i < list.length; i++) {
       $('#country').append(new Option(capitaliseFirstLetter(list[i]),list[i]))   
    }
})

// Helper from http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript
function capitaliseFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

Answer 3

If you're interested in a more generic, non-jquery solution, see this fiddle