帶相關AJAX調用的嵌套Select2

Question

我將Select2與jQuery結合使用，以在表單上的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）以構建相同的結構嗎？

您可以在此鏈接中查看實時示例，選擇任何選項，例如“ 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容器，並且當您獲得多個元素時再次引用它會導致問題。 這個答案對此進行了更多解釋。

Answer 2

要點是一個易於使用的JS類，用於使Select2列表框相關。 例如 -

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

查看codepen上的演示。 另外這里是關於如何使用它的帖子。