hi i have two dropdown dynamic one . my question is when i load my chrome page/refresh the page all the dropdown value are visible without selecting first dropdown option value

 <script>

/* code for :select scheme, relative to department shown */

        $('#department').on('change', function () {  
         
            var departments = $('option:selected', this).attr('attr');
            $("#schemes option").each(function (i) {
                if ($(this).attr('subattr') == departments) {
                    $(this).css({ display: "block" });
                }
                else {
                    $(this).css({ display: "none" });
                }
            });
        });
    </script> // this is the script for both the dropdown department is first dropdown id and schemes is second dropdown id //

note:
all the dynamic option are working well like when i select in first dropdown ,related to his values are shown but when i refresh page and i select second dropdown all values are shown in dropdown without selected first dropdown and I am not excessing according to selected option in both the dropdown when i refresh the page

thank you in advance I am not able to get answer please help me