使用jQuery无法在IE中添加/删除选择选项

Question

When the first dropdown is selected, I'm trying to dynamically update the options in the second dropdown. It's working fine in FF, Chrome etc but doesn't work in IE 8/9 and I don't understand why. Here's a 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('');

problem is with this line. Remove this line and your code will work fine.

Instead of this you may use

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

Answer 2

Is this your HTML code above? If so, then you need to put script = 'text/javascript' from function showFont to the end. This makes the computer read the code as javascript and not HTML which i think your asking it to do. Hope this helps.

Answer 3

Comment the following line in jquery;

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

it will work.

Answer 4

You can use short method like below:

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

Instead of

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