Show/Hide <select> dropdown, with jQuery, based on value

iamchriswick picture iamchriswick · Nov 26, 2010 · Viewed 26.7k times · Source

I'm trying to build a custom dropdownlist which show/hide a second set of dropdowns based on it's selection.

I was wondering if anyone here might be able to help with a solution to this.

Answer

austinbv picture austinbv · Nov 26, 2010

use the jquery :selected a little bit of documentation is here http://api.jquery.com/selected-selector/

That works in an option select menu

I am updating your Jfiddle now if you can give me a little more info about what you want done.


Edit

Here is an updated jfiddle with your answer. http://jsfiddle.net/stAAm/7/

and a copy of the code for Stack overflow

$('#source').change(function () {
        if ($('#source option:selected').text() == "France"){
            $('.cities').hide();
            $('#source2a').show();
        } else if ($('#source option:selected').text() == "Germany"){
            $('.cities').hide();
            $('#source2b').show();
        } else if ($('#source option:selected').text() == "India"){
            $('.cities').hide();
            $('#source2c').show();
        } else {
            $('.cities').hide();
        } });