Question

我正在使用带有jQuery的Select2来构建表单上SELECT元素之间的依赖关系。我正在努力建立典型的关系：国家有国家，国家有城市，城市有城镇等等。现在我正在这样做：

$(document).ready(function() {
    $(".pais").on('change', function() {
        pais = $(this).find('option:selected').val();
        $.get(Routing.generate('estados', {pais_id: pais})).success(function(data) {
            if (data.message === "") {
                $('.estado').empty().append('<option value="-1">Seleccione un estado</option>');
                $.each(data.entities, function(i, d) {
                    $('.estado').append('<option value="' + d.id + '">' + d.nombre + '</option>');
                });

                $('.estado').removeAttr('disabled');
                $('.estado').next('span').remove();
                $('.estado').closest('.form-group').removeClass('has-error');
                $('.estado').select2();
            } else {
                $('.estado').next('span').remove();
                $('.estado').closest('.form-group').addClass('has-error');
                $('.estado').after('<span class="help-block">' + data.message + '</span>');

                $('.estado').empty().append('<option value="-1">Seleccione un estado</option>').attr('disabled', 'disabled');
                $('.municipio').empty().append('<option value="-1">Seleccione un municipio</option>').attr('disabled', 'disabled');
                $('.ciudad').empty().append('<option value="-1">Seleccione un ciudad</option>').attr('disabled', 'disabled');
                $('.parroquia').empty().append('<option value="-1">Seleccione un parroquia</option>').attr('disabled', 'disabled');
            }
        }).error(function(data, status, headers, config) {
            if (status == '500') {
                message = "No hay conexión con el servidor";
            }
        });
    });

    $(".estado").change(function() {
        estado = $(this).find('option:selected').val();

        $.get(Routing.generate('municipios', {estado_id: estado})).success(function(data) {
            ...
        }).error(function(data, status, headers, config) {
            ...
        });

        $.get(Routing.generate('ciudades', {estado_id: estado})).success(function(data) {
            ...
        }).error(function(data, status, headers, config) {
            ...
        });
    });

    $(".municipio").change(function() {
        municipio = $(this).find('option:selected').val();

        $.get(Routing.generate('parroquias', {municipio_id: estado})).success(function(data) {
            ...
        }).error(function(data, status, headers, config) {
            ...
        });
    });
});

但是当我改变相同的SELECT“Estado”或“Ciudad”或“Municipio”或“Parroquia”两次或更多次时，我收到了这个错误：

未捕获的异常：未为Select2 s2id_municipio
定义查询函数

注意：我更改了“Estado”一次以获取此错误，以防您尝试重现相同的错误

也许错误在我的逻辑中，或者可能不是，所以我需要一些帮助，我的问题是：可以使用AJAX调用构建嵌套的依赖SELECT（当然应用Select2）来构建相同的结构吗？

你可以看看这个link中的实例，选择任何选项，例如“Persona Natural”，然后在“Pais de Residencia”的“Datos Personales”选择“委内瑞拉”，然后尝试更改“Estado”领域两次或更多次，看看会发生什么，对此有何建议？

PS：对不起西班牙语的某些部分，这是西班牙客户的工作，他讨厌英语（不要问我为什么）

Answer 1

你应该真正使用Select2的AJAX功能而不是自己动手。这意味着将基础元素从<select>更改为<input type="hidden" />，并将Select2指向数据源。

https://ivaynberg.github.io/select2/#ajax

以下是如何转换状态下拉列表的示例。

var $pais = $("select.pais");
var $estados = $("input.estados");

$estados.select2({
    placeholder: "Seleccione un estado",
    ajax: {
        url: function () {
            var pais = $pais.val();
            return Routing.generate('estados', {pais_id: pais});
        },
        results: function (data) {
            return {
                results: data.entities
            };
        }
    },
    formatNoResults: function () {
        return "No se encontraron estados para el país actual";
    }
    formatAjaxError: function () {
        return "No hay conexión con el servidor";
    }
}).select2("enable", false);

请注意，我使用$("input.estados")作为选择器而不仅仅是类。这是因为Select2会将类复制到Select2容器中，当您获得多个元素时再次引用它会导致问题。这可以解释一下in this answer。

Answer 2

这个gist是一个易于使用的JS类，用于使Select2列表框依赖。例如 -

new Select2Cascade($('#parent'), $('#child'), '/api/to/load/:parentId:/childs');

检查codepen上的演示。这里还有how to use上的帖子。

嵌套的Select2，具有依赖的AJAX调用

2 个答案: