Question

當第一個下拉列表被選中，我試圖動態更新第二個下拉選項。它在FF，Chrome等中工作正常，但在IE 8/9中不起作用，我不明白爲什麼。這是一個jsFiddle

<div class="custom-field">    
    <label for="dropdown1">Select country:</label> 
    <select id="dropdown1" name='properties[country]'> 
     <option value="USA">USA</option> 
     <option value="JAPAN">JAPAN</option> 
    </select> 
</div> 
<div class="custom-field">    
    <label for="dropdown2">Select font:</label> 
    <select id="dropdown2" name='properties[font]'> 
     <option class="us" value="font1">Font1</option> 
     <option class="us" value="font2">Font2</option> 
     <option class="us" value="font3">Font3</option> 
     <option class="jp" value="font4">Font4</option> 
     <option class="jp" value="font5">Font5</option> 
     <option class="jp" value="font6">Font6</option>    
    </select> 
</div> 



function showFont(fontOpt){ 
    if (jQuery('#dropdown1').val() === 'USA'){ 
     var showOptions = fontOpt.filter('.us'); 
    } else {  
     var showOptions = fontOpt.filter('.jp'); 
    } 
    jQuery('#dropdown2').html(showOptions); 
    jQuery('#dropdown2').prop('selectedIndex', 0); 
} 


$(document).ready(function() { 
    // get the child elements of font dropdown 
    var fontOptions = $("#dropdown2").children('option');  
    $("#dropdown2").html(''); 

    showFont(fontOptions); 

    $('#dropdown1').on("change", function(e){ 
     showFont(fontOptions); 
    });  

}); 

Answer 1

$("#dropdown2").html(''); 

問題在於這一行。刪除這一行，你的代碼將正常工作。

取而代之的是你可以使用

$("#dropdown2").children('option').remove(); 

Answer 2

這是您的HTML代碼以上？如果是的話，那麼你需要把script ='text/javascript' from function showFont到最後。這使得計算機將代碼讀取爲javascript，而不是HTML，我認爲您要求這樣做。希望這可以幫助。

Answer 3

評論jQuery中以下行;

//$("#dropdown2").html(''); 

它會工作。

Answer 4

您可以使用短方法象下面這樣：

var fontOptions = $("#dropdown2").children('option');  
$("#dropdown2").html(''); 

而不是

var fontOptions = $("#dropdown2").children('option').remove();