Conditional remove/disable/hide select list option based on another select list. All browser support required

HTML

Module

  Account
  User


Send me an alert

  when my balance...
  when my login...

So this is existing code that someone else worked on and is no longer a resource.

This little sample just changes the second select list based on the selected item in the first select list. This works just fine in FF and Chrome and after some digging I've been told that one can not hide options in a select list in IE.

I've also read up on this question here but still drawing up short on getting it working for IE. Can anyone advise? Thanks.

jsfiddle

Solved

remove instead of hide as shown in the linked post seems to work in IE. Another possible implementation is to empty the option list and add only the options in question:

 var alertselect, modselect, orgalerts;
 var showAlerts = function (module) {
     alertselect.empty().append(
        orgalerts.filter(function () {
         return $(this).data('params').module === module;
     }));
 };

Of course for this to work, you have to store the original options:

 orgalerts = alertselect.children();

Fiddle