Magento 2问题：结账页面国家选择字段显示两个空选项

Hey Remco, 这个问题确实是Magento 2.1.12版本里的已知bug，不少同版本的开发者都反馈过类似情况。下面给你几个实用的解决方案，你可以根据自己的项目情况选择：

方案1：升级到2.1系列的最新补丁版本 #

Magento官方在后续的2.1.x补丁（比如2.1.18，这是2.1系列的最后一个稳定维护版本）中修复了这个国家选择器的空选项问题。升级不仅能解决当前bug，还能修复其他安全漏洞和功能缺陷，是最稳妥的长期解决方案。

方案2：修改前端模板过滤空选项 #

如果暂时无法升级，可以直接修改结账页面的国家选择器模板，手动过滤空条目：

1. 找到模板文件：vendor/magento/module-checkout/view/frontend/web/template/shipping-address/form/element/country-id.html
2. 修改<select>标签的绑定逻辑，添加optionsAfterRender来隐藏/移除空选项：

<select class="select" data-bind="
    attr: {
        name: inputName,
        id: uid,
        disabled: disabled,
        'aria-describedby': getDescriptionId()
    },
    hasFocus: focused,
    optgroup: options,
    value: value,
    optionsCaption: caption,
    optionsValue: 'value',
    optionsText: 'label',
    optionsAfterRender: function(option, item) {
        // 过滤空value或空label的选项
        if (!item.value || !item.label.trim()) {
            ko.applyBindingsToNode(option, {attr: {disabled: true, style: 'display:none;'}}, item);
        }
    }
"></select>

3. 清理Magento缓存（bin/magento cache:clean）并刷新前端静态资源（bin/magento setup:static-content:deploy）

方案3：用JS动态移除空选项 #

如果不想修改模板，可以通过自定义JS在页面加载后动态清理空选项：

1. 在你的自定义模块或主题中添加JS文件，比如app/design/frontend/[YourVendor]/[YourTheme]/web/js/checkout-country-fix.js
2. 写入以下代码：

require(['jquery'], function($) {
    // 监听结账区域加载完成事件
    $(document).on('checkout:shipping-address:rendered checkout:billing-address:rendered', function() {
        // 移除所有空选项
        $('.field.country select option').each(function() {
            if ($(this).val() === '' || $(this).text().trim() === '') {
                $(this).remove();
            }
        });
    });
});

3. 在主题的requirejs-config.js中注册这个JS文件，确保它在结账页面加载

补充说明 #

这个bug的根源通常是Magento在加载国家选项集合时，没有正确过滤掉空的条目（可能是数据配置或核心代码循环逻辑的问题）。上面的方案从不同层面解决了这个问题，其中升级是最推荐的，因为它能从根源上修复问题并获得其他维护更新。

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