Javascript 动态填充ACF字段适用于select，但不适用于select2

我在Wordpress后端的ACF表单中有一个选择字段$（“#国家”），它触发第二个选择字段$（“#城市”）的值。这是一种典型的带有习俗价值观的国家/城市关系

脚本被排队，更改事件被触发，第二个选择使用以下代码填充成功：

var cities = {
    "Spain": [
        "Madrid",
        "Barcelona"
        ],
    "Portugal": [
        "Lisboa",
        "Oporto"
    ]
}

jQuery(document).ready(function($) {
    $('#country').change(function () {
        loadCities($(this).find("option:selected").val());
    }).change();
});

function loadCities(country) {
    $('#city').empty();

    cities[country].forEach(function(city) {
        $('#city').append("<option value='"+city+"'>"+city+"</option>");
    });
}

---

问题是选项（=城市）在select2列表中没有按预期显示。但是它们似乎是附加的，用jquery检查它们的存在会显示它们。

第一件事是，即使对于多维json对象数组，也可以使用数据属性动态附加选项但不要两次初始化选择框

$("#country").select2({ data: data.keys });

您还可以尝试使用change event，而不是使用您的值销毁它和init

$("#country").select2('destroy').empty().select2({ data: data.keys });

---

如果有帮助，请告诉我。

谢谢，这很有效。因此，关键是不初始化select2两次，并在填充新值之前销毁它。

$("#country").select2('destroy').empty().select2({ data: data.keys });