Select2 相关下拉列表答案

【问题标题】：Select2 Dependent dropdown listsSelect2 相关下拉列表
【发布时间】：2013-01-25 16:13:59
【问题描述】：

我正在尝试使用 Select2 插件来创建 4 个相互依赖的下拉列表。我一直在努力寻找正确的方法来更新加载选项的数据。

我的目标是通过 ajax 加载新数据，但是一旦我将它放在客户端中，我就无法将新数据添加到选择列表中。

我试过的代码在这里：

$(#"a3").select2({
    placeholder: "select an item",
    allowClear: true}).on("change",
    function (e) {
         var results = $.get("url?id=2",
            function (data, textStatus, jqXHR) {
                $(this).select2({ data: { results: data, text: "Name" } });
        });
    }
);

这里还有一个问题 select2 changing items dynamically 但那里的解决方案适用于 Select2 v3.2，但不适用于 Select2 v3.3

【问题讨论】：

标签： javascript jquery-select2

【解决方案1】：

Igor 回到我身边，提供了一种方法来做到这一点

var data=[...];    
$().select2({data: function() {return {results:data};}});    
/// later    
data=[...something else];    
// next query select2 will use 'something else' data

【讨论】：

太棒了，我一直在寻找这个。一遍又一遍地调用select2({...})（因为Knockout）导致我在某些浏览器中出现大量内存泄漏。只是对您所写内容的警告：如果您尝试仅返回数据，则 Select2 将引发错误。您需要返回数据位于results 索引中的对象。所以：return {results: data}
能否请您发布您的代码的完整示例？我还需要使用 select2
这对我不起作用，回调永远不会被调用（Select2 v4）

【解决方案2】：

正确的格式是：

.select2("data", {...})

【讨论】：

感谢 Igor，我发现使用该方法会尝试根据我传入的数据在下拉列表中选择一个项目。

【解决方案3】：

对于 Select2 v4.x，这里有一个小的 js class。

使用这个，一个 select2 列表框的选项将由 ajax 基于另一个 select2 列表框的选择来加载/刷新。并且依赖可以被链接。

例如-

new Select2Cascade($('#country'), $('#province'), 'path/to/geocode', {type:"province", parent_id: ''});
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''});

在codepen 上查看演示。这里还有一个关于how to use 的帖子。

【讨论】：