Conditional Dropdownlist Using Jquery Or Javascript Only

Conditional dropdownlist using jquery or javascript only Scenario: I have a main dropdownlist list and if i select 'dropdownmain1' on my dropdownlist it will show dropdownlist corr

Solution 1:

Yes you can do it easily with jquery.

$('select[name!="dropdownmain"]').hide();
$('select[name="' + $('select[name="dropdownmain"]').val() + '"]').show();
$('select[name="dropdownmain"]').change(function(){
    $('select[name!="dropdownmain"]').hide();
    $('select[name="' + $(this).val() + '"]').show();
});

http://jsfiddle.net/p7jyv/2/

And a more readable approach:

var$topSelect = $('select[name="dropdownmain"]');
var$nestedSelects = $('select[name!="dropdownmain"]');
showApplicableSelect();
$topSelect.change(showApplicableSelect);
functionshowApplicableSelect() {
    $nestedSelects.hide();
    $('select[name="' + $topSelect.val() + '"]').show();
}

http://jsfiddle.net/p7jyv/5/