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，但未找到错误。 有什么想法吗？