jQuery - hide options - changed code for IE

I have a problem making this code work in IE. I used "remove" but that's not the correct solution.

I'll go step by step

1. You can download the sample code here https://drive.google.com/file/d/1HGbYRMGBjl7_BFwsb10QJLlVPOGiEIBH/view
 click on page.html to see the example. Corresponding JS file is Reporting.js

2. Page loads. You see the options for the second dropdown

3. Choose, for example, LeaseNo, from the first dropdown. You see the second dropdown is enabled and you see the values in there

4. This is the line of code in Reporting.Js that does it

$('option', operatorSelect).not($("option[datatype *= '" + fieldDataType + "']", operatorSelect))
				.attr('disabled', 'disabled').remove();

Select allOpen in new window

5. It used to be this line but I had to change it because this didn't work in IE11

 $('option', operatorSelect).not($("option[datatype *= '" + fieldDataType + "']", operatorSelect)).hide();

Select allOpen in new window

6. This is the problem with using .remove() --> it removes the options. So now, if I choose another option from the first dropdown, the options that need to show up have been removed. Here's an example

.hide() won't work in IE11. If I use .remove...it actually removes the options. This is another example I found but I don't know how to implement it
http://jsfiddle.net/we89rx4c/13/

I need to hide/display the options and make it work for IE11, Chrome and Edge. There has to be a way to do this.

I thought about cloning the original select options and then use that whenever use chooses another option from the first dropdown..like refreshing the second dropdown with each select... but that didn't work either.  I used this var $options = $("select.fieldOperator > option").clone();