Select2 4.0.6使用allowClear报错：Cannot read property 'id' of undefined如何修复？

我之前也踩过Select2 4.0.6版本这个allowClear的坑！这个报错本质是因为Select2的allowClear功能对选项的结构有严格要求，没满足就会触发这个类型错误，下面给你几个针对性的修复方案：

1. 确保原生select有合法的空选项 #

如果是用原生<select>初始化Select2，必须添加一个空value的选项，同时搭配placeholder配置——这是allowClear生效的前提，否则点击清空按钮时，Select2找不到对应的空状态选项就会报错。

正确的HTML结构：

<select id="yourSelect" class="select2">
  <option value="">请选择</option> <!-- 这个空选项必须存在 -->
  <option value="1">选项A</option>
  <option value="2">选项B</option>
</select>

对应的初始化代码：

$('#yourSelect').select2({
  allowClear: true,
  placeholder: '请选择' // 必须设置placeholder，和空选项对应
});

2. 自定义/远程数据必须包含id和text字段 #

如果是用自定义数据（比如data配置）或者远程加载数据，每个数据项必须明确包含id和text键，而且必须保留一个id为空的项作为清空后的状态：

$('#yourSelect').select2({
  allowClear: true,
  placeholder: '请选择',
  data: [
    {id: '', text: ''}, // 空状态项不能少
    {id: '1', text: '选项A'},
    {id: '2', text: '选项B'}
  ]
});

3. 检查默认选中项的合法性 #

如果你初始化时设置了默认选中值（比如通过value或者selected属性），一定要确保这个值对应的选项存在于列表中。举个例子，如果默认值是3，但你的选项里没有value="3"的项，Select2就会找不到对应的id，从而触发报错。

4. 避免错误的旧版配置 #

注意Select2 4.x版本已经移除了initSelection配置，如果你的代码里还在使用这个旧配置，也可能和allowClear产生冲突引发报错，直接删掉即可。

总结一下 #

这个错误的核心原因就是：Select2的allowClear需要一个合法的空状态选项（带空id），同时所有选中的选项都必须有有效的id值。按照上面的方案调整后，这个报错应该就能解决了！

内容的提问来源于stack exchange，提问作者Hong Van Vit