I have a parent Dropdown, and a child Dropdown on my page. When I change the option on the parent Dropdown, some of the options shown on the child dropdown should hide, and only the appropriate options should show. The code that I have works as desired on Chrome and Firefox, but not on Safari Browser.

Upon debugging from Safari Console, I find the hidden class is getting removed from the appropriate <option></option>, but the options in the child-dropdown are not getting hidden. Similarly, when I select 'All' option from the parent dropdown, all the options from the child dropdown are getting hidden class removed from them; and when I select any other option, the options in the child dropdown that earlier did not have hidden (were displayed), which now need to be hidden, now have the hidden class added to them. But this is not showing/displaying on the UI.

This is from Safari console. As shown here... hidden class has been added to the option, but the option is still visible, and selectable on the UI.

I have seen some other similar issues posted on StackOverflow, and on other blogs, where it is suggested to disable the option, rather than hide. My issue is that, since this is a Browser specific issue, and since it is working on all other browsers excepts Safari, I would want to avoid changing the functionality.

This is what I have so far =>

form.jsp

...
...
<select class="form-control" onchange="toggleDropdowns(this.value)">
    <option value="">All</option>
    <c:forEach items="${items.rows}" var="set">
        <option value=".${set.id}">${set.nm}</option>
    </c:forEach>
</select>
....
....

JS Function

toggleDropdowns : function(id) {
    $(".inactive .set-option").addClass("hidden");
    $(".inactive .set-option" + id).removeClass("hidden");
}

Update

I have tried other ways of hiding/showing the option as well, like using .css({display:none});. This too works on Firefox and Chrome, but not on Safari.