jquery - JS 動的ドロップダウンは FF では機能しますが、Chrome では機能しません

Question

ユーザーが州を選択する動的ドロップダウン リストを作成しました。次のドロップダウン メニューには、その州の都市が表示されます。コードは Firefox では機能しますが、Chrome では機能しません。なぜこれが起こったのですか？

これが私のスクリプトです：

<?php $cityurl = get_the_city()."/js/data.json";?>
<script type="text/javascript">
jQuery(document).ready(function($) {    

    var dataurl = "<?php echo $cityurl; ?>";
        $("#stateid").change(function location() {

            var $dropdown = $(this);
            $.getJSON(dataurl, function(data) {

                var key = $dropdown.val();
                var vals = [];

                switch(key) {
                    case 'State 1':
                        vals = data.city1.split(",");
                        break;
                    case 'State 2':
                        vals = data.city2.split(",");
                        break;  
                    case 'State 3':
                        vals = data.city3.split(",");
                        break;
                    case 'State 4':
                        vals = data.city4.split(",");
                        break;  
                    case 'All':
                        vals = ['Choose a State First'];
                }

                var $jsontwo = $("#cityid");
                $jsontwo.empty();
                $jsontwo.append("<option value='all'>All Regions</option>");
                $.each(vals, function(index, value) {
                    $jsontwo.append("<option value='" 
                                     + value + "'>" 
                                     + value 
                                     + "</option>");
                });
           });
    });
});  
</script>

コンソールと Firebug を確認しましたが、エラーは見つかりませんでした。何か案が？