原生JavaScript改写为jQuery适配第一代iPad Safari兼容性咨询

首先引入兼容老旧浏览器的jQuery 1.x版本（推荐1.12.4，完美适配第一代iPad搭载的Safari版本）：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

替换原有脚本为以下代码，无需修改任何Flask后端逻辑：

<!-- 省份对应城市动态选择脚本 -->
<script>
$(function() {
    // 缓存选择器
    var $provinceSelect = $('#province_name');
    var $citySelect = $('#city');

    // 绑定省份下拉框变更事件
    $provinceSelect.on('change', function() {
        var province = $(this).val();
        // 发起请求替代原fetch逻辑
        $.get('/city/' + province, function(data) {
            var optionHTML = '';
            // 用传统for循环替代for of，兼容旧浏览器
            for (var i = 0; i < data.cities.length; i++) {
                var city = data.cities[i];
                optionHTML += '<option value="' + city.name_of_the_city + '">' + city.name_of_the_city + '</option>';
            }
            $citySelect.html(optionHTML);
        }, 'json');
    });
});
</script>

兼容说明 #

• 原脚本中fetch API、for of迭代语法均不被第一代iPad的Safari支持，是失效的核心原因
• 改用jQuery封装的AJAX请求和传统循环语法，无需额外引入polyfill即可兼容老旧浏览器
• 请求路径、参数、响应解析逻辑完全和原有逻辑一致，不会对后端Flask接口造成任何影响
• 你之前编写的polyfill仅做了IE浏览器判断，未覆盖老版Safari场景，且动态加载polyfill的定时器等待逻辑不稳定，不建议在老旧设备上使用该方案

内容的提问来源于stack exchange，提问作者Ramiro