1

选择第一个下拉列表时，我正在尝试动态更新第二个下拉列表中的选项。它在 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);
    });    

});
4

4 回答 4

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

问题出在这条线上。删除此行，您的代码将正常工作。

取而代之的是，您可以使用

$("#dropdown2").children('option').remove();
于 2012-10-12T10:13:39.883 回答
0

这是你上面的HTML代码吗？如果是这样，那么您需要将script = 'text/javascript'从函数 showFont放到末尾。这使计算机将代码读取为 javascript 而不是我认为您要求它执行的 HTML。希望这可以帮助。

于 2012-10-12T10:13:22.607 回答
0

在 jquery 中注释以下行；

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

它会起作用的。

于 2012-10-12T10:15:53.963 回答
0

您可以使用以下简短方法：

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

代替

var fontOptions = $("#dropdown2").children('option').remove();
于 2012-10-12T10:58:54.520 回答