将多个Select2链接在一起

Chaining multiple Select2 together

本文关键字：链接 在一起 Select2      更新时间：2023-09-26

尝试使用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中返回的结果

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

我搜索了很多例子来帮助我，但没有工作的权利，我所需要的是显示国家的国家选择在第一个选择，并将其传递给第二个选择知道我使用的是select2 v4.0和jquery v2

可以用与标准<select>相同的方式链接Select2。因此，这意味着当第一个选择的值被链接时，第二个选择被重置(通常为占位符)，并且选项通常也会更改。

对于如何使用Select2完成此操作，您有两个选项:

  1. 在值变化时预加载第二个<select>的选项，并让Select2处理本地搜索。这将类似于你目前试图做到这一点，但可能会遇到问题，当有大量的选项可以在第二个<select>中选择。

    在你的例子中，不应该有成千上万的"状态"。(对于任何程度的状态)在一个国家内，所以本地搜索应该不是太大的问题。

  2. 使用Select2的AJAX功能，并根据第一个<select>的值传递一个不同的参数作为url。这要求您有一个动态端点，它可以处理为第二次选择检索条目，并在搜索时过滤它们，因此这并不总是可行的。

    如果您已经有这样一个支持过滤的端点，这是一个响应更快的选项，因为用户不必等待所有选项都被检索到，然后才能从第二个<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

请注意，虽然与您使用的代码类似，但有一些小的区别可能会引起您的注意。

  1. 当您真正期望dataType: "json"时，您设置了dataType: "html"。您在响应中返回JSON，而不是HTML。

  2. 您在第二次呼叫.select2({data:[]})之前没有清除<select>。Select2不会自动删除它与data一起生成的<option>标签，因此您需要自己完成。

  3. 当您更改<select>的值时，您永远不会告诉Select2。您需要在更改第二个<select>后重新触发change事件。

  4. 您在问题中提供的JSON似乎无效。现在我不确定这是否只是因为你给它作为一个例子，但我会检查你的JSON响应与JSONLint只是为了确保它是有效的。

第二个选项的代码类似于

$("#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中进行测试，该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
 });
相关文章：