javascript - 动态填充 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

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

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

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

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

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