将多个 Select2 链接在一起

Posted 2023-05-07

【中文标题】将多个 Select2 链接在一起

【英文标题】：Chaining multiple Select2 together

【发布时间】：2015-07-26 11:55:45

【问题描述】：

尝试使用 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

【参考方案1】：

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

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

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

在您的情况下，一个国家/地区不应有数千个“州”（无论何种程度的州），因此本地搜索不应该成为太大问题。

使用 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

请注意，虽然这与您使用的代码相似，但仍有一些小差异会引起您的注意。

当您真正期待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

【参考方案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
 );

【讨论】：

不加解释地回答，代码与 OP 发布的内容没有任何不同。这将与原始代码具有相同的效果，这显然不是他们想要的。