JQuery .find（）和.children（）在IE11中不工作

Question

有2個下拉菜單，第2個依賴於1個。 相同的代碼在Chrome/Firefox中工作正常，但在IE瀏覽器不工作

下面是jQuery代碼：

$(document).ready(function() { 
    $("#CurrencyPair").children('option:gt(0)').hide(); 
    $("#part1currency").change(function() { 
     $("#CurrencyPair").children('option').hide(); 
     $("#CurrencyPair").children("option[value^=" + $(this).val() + "]").show(); 
    }); 
}); 

下面是HTML代碼：

<select name="part1currency" id="part1currency"> 
    <option value="Select">Select</option> 
    <option value="EUR">EUR</option> 
    <option value="USD">USD</option> 
    <option value="GBP">GBP</option> 
</select> 

<select name="CurrencyPair" id="CurrencyPair"> 
    <!--Below shows when '1 column' is selected is hidden otherwise--> 
    <option value="Select">--Select--</option> 

    <!--Below shows when '2 column' is selected is hidden otherwise--> 
    <option value="EUR/USD">EUR/USD</option> 
    <option value="col2_sm">layout 2</option> 

    <!--Below shows when '3 column' is selected is hidden otherwise--> 
    <option value="USD/EUR">USD/EUR</option> 
    <option value="col3_ssm">layout 4</option> 
    <option value="col3_sms">layout 5</option> 
</select> 

Answer 1

我發現上述問題的一個解決方案。

$(document).ready(function() { 
    var optarray = $("#CurrencyPair").children('option').map(function() { 
     return { 
      "value": this.value, 
      "option": "<option value='" + this.value + "'>" + this.text + " `enter code here`</option>" 
     } 
    }) 

    $("#part1currency").change(function() { 
     $("#CurrencyPair").children('option').remove(); 
     var addoptarr = []; 
     addoptarr.push(optarray[0].option); 
     for (i = 1; i < optarray.length; i++) { 
      if (optarray[i].value.substring(0, 3).indexOf($(this).val()) > -1) { 
       addoptarr.push(optarray[i].option); 
      } 


     } 
     $("#CurrencyPair").html(addoptarr.join('')) 
    }).change(); 
})