magento2.4 地址管理添加三联动

magento自带的地址是只有国家和部分国家城市联动的，国内的也是需要添加一个省市区三级联动的，magento很多插件都是收费的。就自己写了一个记录在此

效果图：

省市区数据：三联动数据；数据要放到主题包下面的js文件下面。不知道具体位置直接加下面的js。浏览器F12看文件加载路径就可以了

js代码：

<script type="text/javascript">
require(["jquery", "Magento_Customer/js/cityData"], function(jQuery){
    // 定义省份代码
    var provice = [], proviceCode = [];
    jQuery.each(cityData['86'], function(idx, item){
        provice[item] = idx;
        proviceCode[idx] = item;
    });
    
    var countryCode = jQuery('#country option:selected').val();// 初始化国家
    var proviceValue = "<?=$block->getRegion()?>";
    var cityValue = "<?= $block->getAddress()->getCity() ?>";// 默认城市
    var smallValue = "<?= $block->getStreetLine(1)?>";// 区县

    // 选择外国不做处理
    jQuery("#country").change(function(){
        cityCode = jQuery('#country option:selected').val();
        if(cityCode != 'CN'){
            jQuery(".county").hide(); // 关闭县/市
            jQuery("#select_city").hide(); // 关闭城市下拉
            jQuery("#city").val('');
            jQuery("#city").show();
        }else{
            jQuery("#city").val(cityValue);
        }
        countryCode = cityCode;
    });

    jQuery("#region_id").change(function(){
        if(countryCode != 'CN') return;
        jQuery("#select_city").remove();
        // 获取省市信息,只针对国内
        var proValue = jQuery('#region_id option:selected').text();
        var is_onload = false;
        code = provice[proValue];
        // 页面加载的时候显示原始数据
        if(code == '' || code == undefined || code == null){
            is_onload = true;
            code = provice[proviceValue];
        }
        var html = '<select id="select_city" name="select_city" title="<?= $escaper->escapeHtmlAttr(__('City')) ?>" class="input-text <?= $escaper->escapeHtmlAttr($_cityValidationClass) ?>">';
        html += "<option value=''>== 请选择 ==</option>";
        if(cityData[code]){
            jQuery.each(cityData[code], function(idx,item){
                var optionS = '';
                if(is_onload && item == cityValue){
                    optionS = 'selected="selected"';
                }
                html += "<option value='" + item + "' exid='" + idx + "' "+optionS+">" + item + "</option>";
            });
            html += "</select>";
            jQuery("#city").hide();
            jQuery("#new_city").append(html);
        }else{
            jQuery("#city").show();
            jQuery(".county").hide();
            jQuery("#city").val('');
        }
    });
    
    // 选择城市之后赋值
    jQuery("body").delegate("#select_city", "change", function () {
        var cityValue = jQuery('#select_city option:selected').text();
        var cityCode = jQuery('#select_city option:selected').attr('exid');
        var html = '', optionS = '';
        jQuery("input#city").val(cityValue);
        // 存在县/市则显示3级选项
        countyValue = cityData[cityCode];
        if(countyValue){
            jQuery.each(countyValue, function(idx,item){
                optionS = '';
                if(item == smallValue)  optionS = 'selected="selected"';
                html += "<option value='" + item + "' exid='" + idx + "' "+optionS+">" + item + "</option>";
            });
            jQuery("#select_county").empty();
            jQuery("#select_county").append(html);
            jQuery(".county").show();
        }else{
            html += "<option value=''>== 请选择 ==</option>";
            jQuery(".county").hide();
        }
    });
    
    // 3级选择
    jQuery("#select_county").change(function(){
        var cityValue = jQuery('#select_county option:selected').text();
        jQuery("input#street_1").val(cityValue);;
    });
    jQuery("#region_id").trigger("change");
    jQuery("#select_city").trigger("change");
});
</script>

直接添加到customer/view/frontend/templates/address/edit.phtml页面的最后面，赶着交付代码未做封装，有空了来修改

html页面也有修改：