将多个Select2链接在一起
尝试使用select2插件创建两个链接自动填充选择字段第一个选择包含国家/地区名称（静态选择），第二个选择显示从第一个选择我的代码中选择的国家/地区的状态是
USA Untied Kingdom France etc........ JavaScript代码
$(document).ready(function() { $('#country').select2({ placeholder: 'Select Country', allowClear: true }); $('#state').select2({ placeholder: 'Select State', allowClear: true }); $('#country').change(function() { var selectedCountries = $('#countryoption:selected').val(); var selectedCountries = 'id='+ selectedCountries; $.ajax({ type: 'POST', url: 'http://localhost/CodeIgniter/countries/get_state/', dataType: 'html', data: selectedCountries, }).done( function( data ) { data = $.map(data, function(item) { return { id: item.id, text: item.name }; }); $('#state').select2({ data: data }); } }) }); });
JSON中的Returedned结果
{"id":"1","text":"Chigaco"}{"id":"4","text":"Albama"}{"id":"2","text":"Tulsa"} etc...........
我搜索了很多一个例子来帮助我这个，但没有任何正常工作我需要的是显示在第一个选择中选择的国家的状态并将其传递给第二个选择已知我正在使用select2 v4.0和jquery v2
Select2的链接方式与标准可以链接的方式相同。 这意味着当第一个选择的值被链接时，第二个选择被重置（通常是占位符），并且选项通常也会改变。
对于如何使用Select2，您有两种选择：
-
当值更改时，为第二个
预加载选项，并让Select2在本地处理搜索。 这与您当前尝试执行此操作的方式类似，但在第二个可以选择大量选项时可能会遇到问题。在你的情况下，一个国家内不应该存在数以千计的“州”（对于任何程度的国家），因此本地搜索不应该是一个太大的问题。
-
使用Select2的AJAXfunction，并根据第一个
的值传入一个不同的参数作为要使用的url。 这要求您有一个动态端点，可以处理检索第二个选择的项目以及在搜索时过滤它们 ，因此它并不总是可行的。如果您已经有一个支持过滤的端点，那么这是一个响应更快的选项，因为用户不必等待所有选项被检索，然后才能从第二个
选择一个选项。
您选择的选项在很大程度上取决于您已经设置的内容，您正在使用的数据集的大小（Select2不能很好地处理数千个选项），以及您想要提供的用户体验。
第一个选项的代码类似于
$("#first").select2({ placeholder: 'Select a number range' }); $("#second").select2({ placeholder: 'Select a number' }); $("#first").on("change", function () { $("#second option[value]").remove(); var newOptions = []; // the result of your JSON request $("#second").append(newOptions).val("").trigger("change"); });
并且可以在以下jsbin上测试，使用数字范围而不是国家和州： http ：//jsbin.com/wigalivapi/1/edit？html，output
请注意，虽然这与您使用的代码类似 ，但是有一些小的区别可能会引起您的注意。
-
当你真正期待
dataType: "json"时，你正在设置dataType: "html"dataType: "json"。 您在回复中返回JSON，而不是HTML。 -
在第二次调用
.select2({data:[]})之前，您没有清除。 Select2不会自动删除它使用data生成的标记，因此您需要自己执行此操作。 -
当您更改
的值时，您永远不会告诉Select2它。change您需要在第二个上重新触发change事件。 -
您在问题中提供的JSON似乎无效。 现在我不确定这是否只是因为你给它作为一个例子，但我会用JSONLint检查你的JSON响应，以确保它是有效的。
第二个选项的代码类似于
$("#first").select2({ placeholder: 'Select a number range' }); $("#second").select2({ placeholder: 'Select a number', ajax: { url: http://localhost/CodeIgniter/countries/get_state/', type: 'POST', data: function (params) { return { id: $("#first").val(), search: params.term } } } });
这可以在下面的jsbin中测试，它使用一系列数字来模拟响应（类似于另一个例子）： http ：//jsbin.com/gihusohepe/1/edit？html，output
你在json回复中错过了逗号。
http://jsfiddle.net/jEADR/1570/
var data = [{"id":"1","text":"Chigaco"},{"id":"4","text":"Albama"},{"id":"2","text":"Tulsa"}]; var data2=[]; $.map(data, function(item) { data2.push( { id: item.id, text: item.text }); }); $('#state').select2({ data: data2 });