将多个 Select2 链接在一起

Question

尝试使用 select2 插件创建两个链式自动填充 select 字段第一个 select 包含国家名称（静态 select），第二个显示国家的州 select 从第一个 select 我的代码是

<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

{"id":"1","text":"Chigaco"}{"id":"4","text":"Albama"}{"id":"2","text":"Tulsa"} etc...........

我搜索了很多示例来帮助我解决这个问题，但没有任何工作正常我需要的是显示第一个 select 中选择的国家/地区并将其传递给第二个 select 知道我正在使用 select2 v4.0 和 jquery v2

Answer 1

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

Answer 2

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

对于如何使用 Select2 完成此操作，您有两种选择：

当值改变时预加载第二个 <select> 的选项，并让 Select2 处理本地搜索。这将类似于您当前尝试执行此操作的方式，但是当在第二个 <select>.
中可以 select 编辑大量选项时，可能会遇到问题
在您的情况下，一个国家内不应该有数以千计的“州”（对于任何级别的州），因此本地搜索应该不是什么大问题。
使用 Select2 的 AJAX 功能并传入一个不同的参数作为 url，以根据第一个 <select> 的值使用。这要求您有一个动态端点，可以处理第二个 select 的项目检索以及在搜索时过滤它们 ，因此它并不总是可行的。

如果您已经有这样一个支持过滤的端点，这是一个响应速度更快的选项，因为用户不必等待所有选项都被检索后才能 select 从第二个 <select>.

您选择什么选项在很大程度上取决于您已经设置的内容、您正在使用的数据集的大小（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"。您在回复中返回 JSON，而不是 HTML。
在第二次调用 .select2({data:[]}) 之前，您没有清除 <select>。 Select2 不会自动删除它使用 data 生成的 <option> 标签，因此您需要自己删除。
当您更改 <select> 的值时，您永远不会告诉 Select2。您需要在更改后的第二个 <select> 重新触发 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

将多个 Select2 链接在一起

Chaining multiple Select2 together

javascript

jquery

jquery-select2

jquery-select2-4