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();