0

HTML

<label for="fld1">Module</label>
<span class="control"><select id="fld1" name="mod">
  <option value="Account" selected>Account</option>
  <option value="User">User</option>
</select></span>

<label for="fld2">Send me an alert</label>
<span class="control"><select id="fld2" name="alert">
  <option value="1" data-params='{"mod":"Account"}'>when my balance...</option>
  <option value="2" data-params='{"mod":"User"}'>when my login...</option>
</select></span>

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

Community
  • 1
  • 1
Silom
  • 35
  • 1
  • 6

1 Answers1

1

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

Me.Name
  • 12,259
  • 3
  • 31
  • 48
  • Ah yes perfect thank you so much! I've been sweating over this for the entire day. I was removing them originally but now that you said I had to store the original options, it makes sense. I was trying to append empty options so that's why it wasn't working. – Silom Nov 09 '15 at 21:36