在IE浏览器上选择下拉显示隐藏（添加删除元素）

Question

I have select dropdown i have 2 different shipping methods available in that dropdown. If i select sipping 1 i want to hide the Rest fexex shipping options & vice versa if i selected any of the fedex method i want to hide freeshipping

please check js fiddle below

<fieldset>
   <select name="shipping_method" id="shipping_method" style="width:250px;" class="required-entry">
      <option value="">Please select a shipping method...</option>
      <optgroup label="Free Shipping" style="font-style:normal;">
         <option value="freeshipping_freeshipping">
            Shipping1 - $0.00                                                    
         </option>
      </optgroup>
      <optgroup label="FedEx" style="font-style:normal;">
         <option value="fedex_FEDEX_GROUND">
             Fedex1 - $18.07                                                    
         </option>
         <option value="fedex_FEDEX_2_DAY">
             Fedex2 - $30.62                                                    
         </option>
         <option value="fedex_STANDARD_OVERNIGHT">
             Fedex3 - $81.34                                                    
         </option>
      </optgroup>
   </select>
</fieldset>
<a href="#" class="shipping-reset" style="display: none">Clear Shipping Selection</a>
<p class="actions">
   <button id="update_shipping_method_submit" type="submit" class="button" style="display: none;"><span><span>Update Shipping Method</span></span></button>
</p>

jsfiddle

Answer 1

Try something like this(not tested)

$('select').on('change', function() {
var arr1 = $('#shipping_method option:not(:selected)');
    for (var i = 0; i < arr1.length; i++) {
        $("#shipping_method").children("optgroup[label='" + arr1[i].value + "']").remove();
        console.log("removed");
        }
})