嵌套的Select2，具有依赖的AJAX调用
我正在使用带有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('Seleccione un estado'); $.each(data.entities, function(i, d) { $('.estado').append('' + d.nombre + ''); }); $('.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('' + data.message + ''); $('.estado').empty().append('Seleccione un estado').attr('disabled', 'disabled'); $('.municipio').empty().append('Seleccione un municipio').attr('disabled', 'disabled'); $('.ciudad').empty().append('Seleccione un ciudad').attr('disabled', 'disabled'); $('.parroquia').empty().append('Seleccione un parroquia').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”两次或更多次时，我收到此错误：
未捕获的exception：未为Select2 s2id_municipio定义查询function
注意：我更改了“Estado”多次以获取此错误，以防您尝试重现相同的错误
也许错误在我的逻辑中或者可能不是，所以我需要一些帮助，我的问题是：可以用AJAX调用构建嵌套的依赖SELECT（当然应用Select2）来构建相同的结构吗？
您可以看一下这个链接中的实例，选择任何选项，例如“Persona Natural”，然后在“Pais de Residencia”的“Datos Personales”中选择“委内瑞拉”，然后尝试将“Estado”字段更改为两个或更多时间，看看会发生什么，对此有何建议？
PS：对不起西class牙语的某些部分，这是西class牙客户的工作，他讨厌英语（不要问我为什么）
您应该使用Select2的AJAXfunction，而不是自己动手。 这意味着将基础元素从更改为并将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容器中，当您获得多个元素时再次引用它时会引起问题。 在这个答案中再解释一下。
这个要点是一个易于使用的JS类，用于使Select2列表框依赖。 例如 –
new Select2Cascade($('#parent'), $('#child'), '/api/to/load/:parentId:/childs');
检查codepen上的演示。 这里还有一篇关于如何使用它的post。