Javascript 选择2：初始化后如何设置数据？

我需要在初始化select2后设置一个数据数组。所以我想做这样的事情：

var select = $('#select').select2({});
select.data([
  {id: 1, text: 'value1'},
  {id: 1, text: 'value1'}
]);

但我得到了以下错误：

连接到元素时，Select2不允许使用“数据”选项

我的HTML：

<select id="select" class="chzn-select"></select>

我应该使用什么来代替select元素

---

我需要在onload中设置搜索项目的来源：

$.each(data, function(index, value) {
  $('#selectId').append(
    '<option value="' + data[index].id + '">' + data[index].value1 + '</option>'
  );
});

$。每个（数据、函数（索引、值）{
$（'#selectId'）。追加(
''+数据[索引]。值1+''
);
});

制作一个

元素并将select2绑定到该元素。在常规选择框中使用.select2不允许您处理数据，它主要提供UI和后期选择方法

资料来源：

---

对于v4，您必须使用更新的数据销毁和重建select2。检查

我最近遇到过这样一个场景：更改一个select2对象会更改另一个对象的内容（父子分组有效）。我使用ajax调用检索一组新的Json数据，然后由第二个select2对象获取。我已将代码包括在下面：

 $("#group").on('change', function () {
        var uri = "/Url/RetrieveNewResults";
        $.ajax({
            url: uri,
            data: {
                format: 'json',
                Id: $("#group :selected").val()
            },
            type: "POST",
            success: function (data) {
                $("#groupchild").html('');
                $("#groupchild").select2({
                    data: data,
                    theme: 'bootstrap',
                    placeholder: "Select a Type"
                });
            },
            error: function () {
                console.log("Error")
            }
        });
    });

我发现我必须包含$（“#groupchild”）.html（“”），以便清除第二个select2中的前一组数据。希望这有帮助。

来源：

添加项目：

var data = {
    id: 1,
    text: 'Barn owl'
};

var newOption = new Option(data.text, data.id, false, false);
$('#mySelect2').append(newOption).trigger('change');

明确项目：

$('#mySelect2').val(null).trigger('change');

这就是我所做的

1.扩展select2 2.照常初始化（例如，您的可能不同）

---

您可以重新启动并触发select2

渲染选择2

$('.select2').select2({
  placeholder: 'Slect value',
  allowClear: true
});

$('.select2').trigger('change');

需要更改数据后

数据

let dataChange = [
  {
    id: 0,
    text: 'enhancement'
  },
  {
    id: 1,
    text: 'bug'
  },
  {
    id: 2,
    text: 'duplicate'
  },
  {
    id: 3,
    text: 'invalid'
  },
  {
    id: 4,
    text: 'wontfix'
  }
];

重新启动select2

$('.select2').select2('destroy');
$('.select2').empty();
$('.select2').select2({
  placeholder: 'Slect value',
  allowClear: true,
  data: dataChange
});

触发器选择2

$('.select2').select2({
  placeholder: 'Slect value',
  allowClear: true
});

$('.select2').trigger('change');

---

希望这是你的答案：3

你想做什么

data

用于设置所选选项（我也不确定您的语法是否正确），Select2

select

只能有一个选定元素，因此您可以使用

。Select2（'val'，optionValue）

。如果需要多个选定项，可以在隐藏输入上调用

。select2（）

，或使用

multiple

属性进行选择。如果要设置搜索项目的来源，那是另一回事。指定您试图执行的操作。我需要为我的select2小部件设置一个新的数据数组。如果错误的话，可能是.data（）。我正在寻找类似于setData方法的东西。你是说选项列表吗？只需更新

select

中的选项，select2实例就会自动检索这些选项。我需要设置搜索项的来源。我个人更喜欢

$（'#selectId'）。append（$.map（数据，函数（v，I）{return$（''.{val:I，text:v}）；}）但这两种方法都应该有效。解决方案的缺点是数据的编程设置被破坏。有没有办法解决这个问题？顺便说一句，你的解决方案是+1。我相信这会清除选中的项目，而不是列表中的实际数据？最好的答案！谢谢你的帮助！
$('.select2').trigger('change');