Question

我在Wordpress后端的ACF表单中有一个选择字段 $（“＃country”），该字段触发了第二个选择字段 $（“＃city”）。这是具有自定义值的典型国家/城市关系。

使用以下代码将脚本排入队列，触发change事件，并成功填充第二个选择：

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');
}

问题在于选项（=城市）并未按预期显示在select2列表中。但是它们似乎被追加了，用jquery检查它们的存在会显示它们。

Answer 1

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

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

代替销毁它并使用您的值进行初始化，您也可以尝试使用change事件。

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

让我知道这是否有帮助。

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

1 个答案: