Select2 v4.06多选下拉框用val预填充选中项仅生效一项的问题求助

你遇到的问题是因为Select2 v4.0+版本对API和数据格式做了不少改动，旧版本的select2('val')方法已经被弃用，而且数据格式要求也更严格了。下面给你两种可行的解决方案：

方案一：使用标准jQuery方法设置选中值 #

首先要注意，Select2 v4.x要求data选项的每个元素必须是包含id和text属性的对象（而不是单纯的字符串），这样组件才能正确识别每个选项的唯一标识和显示文本。然后我们用jQuery的val()方法设置选中值，再触发change事件让Select2更新UI：

$(document).ready(function() {
  // 定义符合Select2 v4要求的数据结构
  const tagOptions = [
    { id: "Data Structure", text: "Data Structure" },
    { id: "DBMS", text: "DBMS" },
    { id: "OS", text: "OS" }
  ];

  $('.select2_tags').select2({
    placeholder: "Select",
    data: tagOptions
  });

  // 设置选中值并触发change事件
  $('.select2_tags').val(["OS", "DBMS"]).trigger('change');
});

方案二：初始化时直接设置选中值 #

如果想在初始化Select2的同时完成选中设置，可以把val()和trigger('change')链式调用在初始化之后：

$(document).ready(function() {
  const tagOptions = [
    { id: "Data Structure", text: "Data Structure" },
    { id: "DBMS", text: "DBMS" },
    { id: "OS", text: "OS" }
  ];

  $('.select2_tags')
    .select2({
      placeholder: "Select",
      data: tagOptions
    })
    .val(["OS", "DBMS"])
    .trigger('change');
});

为什么原来的代码不生效？ #

1. 数据格式不符合要求：Select2 v4.x不再接受单纯的字符串数组作为data参数，必须使用id+text的对象结构，否则组件无法正确关联选项值和显示文本。
2. 旧API已被弃用：select2('val', ...)这种调用方式在v4版本中已经被移除，现在需要用标准的jQuery val()方法设置值，再通过trigger('change')通知Select2更新界面状态。

内容的提问来源于stack exchange，提问作者Sourav Saha