1

最初のドロップダウンが選択されたとき、2番目のドロップダウンのオプションを動的に更新しようとしています。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

以下のような短い方法を使用できます。

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

それ以外の

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

これは上記のHTMLコードですか？その場合は、関数showFontのscript ='text/javascript'を最後に配置する必要があります。これにより、コンピューターはコードをHTMLではなくjavascriptとして読み取るようになります。これは、あなたが求めていると思います。お役に立てれば。

于 2012-10-12T10:13:22.607 に答える
0

jqueryの次の行にコメントします。

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

それが動作します。

于 2012-10-12T10:15:53.963 に答える