Select2下拉框如何从嵌套JSON中获取父级值实现父:子显示格式

核心逻辑：提前处理嵌套的JSON数据源，给所有子项挂载所属父级的文本属性，格式化选中项时直接读取属性拼接即可，避免读取DOM带来的不稳定问题。

步骤1：预处理数据源 #

在初始化Select2之前先执行下面的代码，给每个子项添加parentText属性存储父级分类文本：

preload_data.forEach(parent => {
  // 遍历所有父级分类下的子项
  if (Array.isArray(parent.children)) {
    parent.children.forEach(child => {
      child.parentText = parent.text;
    });
  }
});

步骤2：修改自定义格式化函数 #

直接读取子项挂载的parentText属性拼接格式即可：

function format1(item) {
  // 子项存在父级属性时返回「父级:子级」格式
  if (item.parentText) {
    return item.parentText + ':' + item.text;
  }
  // 若允许选中父级分类，直接返回父级文本
  return item.text;
}

补充说明 #

你原来的代码尝试通过:selected选项读取DOM获取父级信息的方式不可靠：Select2渲染后的选项DOM没有直接绑定父子层级关系，多选场景下读取DOM还会出现取值错乱的问题，预处理数据源是性能最高、兼容性最好的实现方式。
如果你的Select2升级到4.x及以上版本，只需要把初始化配置里的formatSelection参数名改为templateSelection即可，其余代码无需改动。

内容的提问来源于stack exchange，提问作者Bakemonotong Unknown