Option tag display block/none in Internet Explorer

Question

This is an additional problem to my previous question.

I have a perfect code (DEMO) which works as expected. But this works fine in Chrome and firefox but not in Internet Explorer. That is bcause IE doesn't support disply: none/block for option tags.

To explain the flow of the functionality,

• Main Tag and Sub Tag are 2 different section which has the same list values
• same item should not be present in the both section. When User select Item 1 from Main tag, same item should be removed from the Sub Tag list.
• Sub Tag has a section called Selected sub Tags, where in selected sub tags will be shown as tags. When we delete these selected tags, it should display back in Sub Tag list
• If user select different item (example: Item 2) in Main tag list, it should toggle the remove/add in Sub Tag list. Means, remove the currently selected item (Item 2) and add back the previously removed item (Item 1) to Sub Tag. If the Item 2 is already selected in Selected Sub Tags list, it should get removed from Selected Sub Tags list as well

All I need is to get the given code work in Internet Explorer.

Or is there any way to get the same funtionality with ul li instead of list item ?

Answer 1

It's a little unsemantic to just hide an option. There's some browser (Internet Explorer in your case) which can't do that. Your best shot to handle all browsers is to actually remove the option from the DOM, just not hiding it.

Do you want something fun with your demo ? Select Tag 1 as the main tag. Then select Tag 2 as a sub tag. Now play with UP and DOWN arrow on your keboard and feel the magic. So now, can you really say that is a perfect code which works as expected ?

If you want to have a working code, you have to remove and add options in the select. Hiding an option is too weird and not really supported by browsers (even firefox and chrome).