Friday, August 21, 2015

Reset Cascading Dropdown Controls using JavaScript

Hi,

Recently, I have encountered an issue on how to reset cascading dropdown controls in cross browsing mode (IE/Firefox/Chrome). After creating code spikes, I come up with a solution that works across major browsers.
Code
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(".reset-link").click(function() {
    ResetCascade($(this));
});

function ResetCascade(itemReset) {
    var formID = $(itemReset).closest('.contact-form');
    if (formID != null) {
        var firstDropDown = $(formID).find('.cascading_group').find('.firstDropDownDiv select');
        var secondDropDown = $(formID).find('.cascading_group').find('.secondDropDownDiv select');
        var thirdDropDown = $(formID).find('.cascading_group').find('.thirdDropDownDiv select');
        if (firstDropDown != null) {
            var valueId = $(firstDropDown).val();
            if (valueId != "" && valueId != null) {
                $(".firstDropDownDiv select option:selected").attr('selected', false);
                $(".firstDropDownDiv select option:first").attr('selected', 'selected');
            }
            if (secondDropDown != null) {
                var valueId2 = $(secondDropDown).val();
                if (valueId2 != "" && valueId2 != null) {
                    $(".secondDropDownDiv select option:selected").attr('selected', false);
                    $(".secondDropDownDiv select option:first").attr('selected', 'selected');
                }
            }
            if (thirdDropDown != null) {
                var valueId3 = $(thirdDropDown).val();
                if (valueId3 != "" && valueId3 != null) {
                    $(".thirdDropDownDiv select option:selected").attr('selected', false);
                    $(".thirdDropDownDiv select option:first").attr('selected', 'selected');
                }
            }
        }
    }
}

Cheers! :)

0 comments:

Post a Comment