Question

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

Answer 1

伊戈尔回来找我这个方法

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

Answer 2

正确的格式是：

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

Answer 3

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

使用此选项，ajax将根据另一个select2列表框的选择加载/刷新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上的帖子。

Select2 Dependent下拉列表

3 个答案: