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

Question

我在 Wordpress 后端的 ACF 表单中有一个选择字段 $("#country")，它会触发第二个选择字段的值 $("#city")时间>。这是具有自定义值的典型国家/城市关系。

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

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 而不是 select。这里改变了 loadCities 函数：

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

    var data = [{id: "", text: ""}];
    cities[country].forEach(function(city) {
        data.push({id: city, text: city});
    });

    $('#city').select2({
        data: data,
        placeholder: "Select a city"
    }).trigger('change');
}

问题在于选项 (=cities) 未按预期显示在 select2 列表中。但它们似乎是附加的，用 jquery 检查它们的存在会显示它们。

Answer 1

首先，您可以使用 data 属性动态附加选项，即使对于多维 json 对象数组也是如此。 但不要初始化选择框两次！

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

您也可以尝试使用更改事件来销毁它并使用您的值进行初始化。

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

如果这有帮助，请告诉我。