Question

我正在使用select2 v4并尝试使用本地（已加载）选项创建依赖列表。

var list1 = [
    {id: 42, name: 'xxx'},
    {id: 43, name: 'yyy'}
];

var list2 = [
    {id: 1, name: 'aaa', list1: 42},
    {id: 2, name: 'bbb', list1: 42},
    {id: 3, name: 'ccc', list1: 43},
    {id: 4, name: 'ddd', list1: 43}
]

我希望list2依赖list1

我尝试在data上使用回调：

$('#list1').select2({
    data: list1
});

$('#list2').select2({
    data: function () {
        var list2_filtered = $.grep(list2, function (choice) {
            return choice.list1 == $('#list1').val();
        });
        return list2_filtered;
    }
});

但似乎没有被调用。

为什么我的回调函数从未被调用？如何使这些本地列表依赖？

Answer 1

刷新select2数据是众所周知的issue。

所以我实现了自己的“数据更新程序”：

function refreshSelect($input, data) {
    $input.html($('<option />')); // if a default blank is needed
    for (var key in data) {
        var $option = $('<option />')
            .prop('value', data[key]['id'])
            .text(data[key]['text'])
        ;
        $input.append($option)
    }
    $input.trigger('change');
}

以下是如何使用它：

<select id="my_select_input"></select>

var $input = $('#my_select_input');

var data = [
    {
        id: 42,
        text: 'XX'
    },
    {
        id: 43,
        text: 'YY'
    }
];

refreshSelect($input, data);

使用和不使用select2

从属列表没有ajax

1 个答案: