Question

尝试使用select2插件制作两个链式自动填充选择字段第一个选择包含国家/地区名称（静态选择），第二个选择显示从第一个选择我的代码中选择的国家/地区的状态

<select id="country" name="country" size="1" class=" form-control">
<option></option>
<option value="1">USA</option>
<option value="2">Untied Kingdom</option>
<option value="3">France</option>
etc........
</select>
<select id="states" name="states" size="1" class="form-control">
<option></option>
</select>

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

Answer 1

Select2的链接方式与标准<select>可以链接的方式相同。这意味着当第一个选择的值被链接时，第二个选择被重置（通常是一个占位符），选项通常也会改变。

对于如何使用Select2，您有两种选择：

当值更改时，预加载第二个<select>的选项，并让Select2处理本地搜索。这与您当前尝试执行此操作的方式类似，但如果在第二个<select>中可以选择大量选项，则可能会遇到问题。

在你的情况下，一个国家内不应该存在数以千计的“州”（对于任何程度的国家），所以本地搜索不应该是一个太大的问题。
使用Select2的AJAX功能，并根据第一个url的值传入与<select>不同的参数。这要求您有一个动态端点，可以处理第二个选择的项目，并在搜索时过滤它们，因此并不总是可行。

如果你已经有一个支持过滤的端点，那么这是一个响应更快的选项，因为用户不必等待所有选项被检索，然后才能从第二个{{1}中选择一个选项。 }。

您选择的选项在很大程度上取决于您已经设置的内容，您正在使用的数据集的大小（Select2不能很好地处理数千个选项），以及您想要提供的用户体验。 / p>

第一个选项的代码类似于

<select>

可以在以下jsbin上测试，使用数字范围而不是国家和州：http://jsbin.com/wigalivapi/1/edit?html,output

请注意，虽然这类似于您使用的代码，但是会有一些小的差异可能会引起您的注意。

当您真正期待$("#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"); });时，您正在设置dataType: "html"。您在回复中返回JSON，而不是HTML。
在您第二次致电dataType: "json"之前，您尚未清除<select>。 Select2不会自动删除它使用.select2({data:[]})生成的<option>代码，因此您需要自行执行此操作。
当您更改data的值时，您永远不会告诉Select2它。更改后，您需要在第二个<select>上重新触发change事件。
您在问题中提供的JSON似乎无效。现在我不确定这是否只是因为你给它作为一个例子，但我会用JSONLint检查你的JSON响应，以确保它是有效的。

第二个选项的代码类似于

<select>

这可以在下面的jsbin中测试，它使用一系列数字来模拟响应（类似于另一个例子）：http://jsbin.com/gihusohepe/1/edit?html,output

Answer 2

你在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
 });

将多个Select2链接在一起

2 个答案: