Hide options from cascading select list using Javascript

[Leirbag Assuab]

Hi! I have a cascading list with values:

  none-none

  A1-B1,

  A1-B2

  A2-B3

  A2-B4

In certain transition screens I want to hide "A2" values and set default value to "A1", so user has only to pick up "B1" or "B2".

I'm able to hide "A2" values and set first list to "A1", but second list remains "none" without any values. When I change from "A1" to "none" and again to "A1", then second list is populated with "B1" and "B2" options. So, is there a way, using Javascript, to achieve this behaviour?

This is part of the code I have included in announcement banner:

...
    function hideSelectListValues() {
        //checking for certain screen transition
        if (($('#issue-workflow-transition').length > 0) && ($("[name='action']").length > 0) && ($("[name='action']").val() == "141")) {
            //If the select list is alredy populated do nothing
            if ($('#customfield_11408').val() == "" ) {
                var options2hide = ["14163", "14111", "14167", "14192", "14222", "14262", "14312", "14325", "14337", "14349", "14359", "14373"];
                for (var i = 0; i < options2hide.length; i++) {
                    $("#customfield_11408 option[value='" + options2hide[i] + "']").hide();
                }
                $('#customfield_11408').val("14177");
            }
        }
    }

Thanks in advance!