選擇下拉顯示隱藏（添加刪除元素）I.E瀏覽器

Question

我有選擇下拉列表我有2種不同的運輸方法可用在該下拉列表中。如果我選擇喝1我想隱藏的休息fexex航運選擇 &反之亦然，如果我選擇任何聯邦快遞的方法我想隱藏freeshipping

請JS小提琴下面

<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

嘗試這樣的事情（未測試）

$('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"); 
     } 
})