Select2问题：无法选择其他下拉框已选中的选项

问题根源 #

你遇到的问题是HTML元素id重复导致的：循环生成下拉框时，所有同类型的<option>都使用了${type.label}作为id（比如所有下拉框里的"mobile"选项id都是mobile），而HTML要求页面内的id必须唯一。Select2在处理选项时会依赖id跟踪状态，重复的id会让它误把不同下拉框里的同label选项当成同一个元素，从而在一个下拉框选中后，其他下拉框里的同id选项被禁用。

解决方案 #

只需要确保每个<option>的id唯一，或者直接移除option的id属性（因为option本身不需要单独id，只要父级select的id唯一即可）。

方案1：给option的id添加循环索引 #

修改循环生成option的代码，把id加上外层循环的索引值，保证每个option的id唯一：

<isloop items="${pdict.phoneData}" var="phone" status="loopState">
   <select 
   required 
   class="form-control phoneType ps-select"
   id="phoneType${loopState.index}">
   <option value="">Select</option>
   <isloop items="${phoneTypeMapping}" var="type">
      <option id="${type.label}-${loopState.index}"
      ${type.value === phone.PhoneTypeID ? 'selected' : ''} 
      value="${type.value}">${type.label}
      </option>
   </isloop>
   </select>
</isloop>

方案2：直接移除option的id属性 #

如果不需要给option单独设置id，直接删掉这个属性更简单：

<isloop items="${pdict.phoneData}" var="phone" status="loopState">
   <select 
   required 
   class="form-control phoneType ps-select"
   id="phoneType${loopState.index}">
   <option value="">Select</option>
   <isloop items="${phoneTypeMapping}" var="type">
      <option
      ${type.value === phone.PhoneTypeID ? 'selected' : ''} 
      value="${type.value}">${type.label}
      </option>
   </isloop>
   </select>
</isloop>

验证修改 #

修改HTML后，重新初始化Select2（刷新页面即可），所有下拉框的选项就可以独立选择，不会再出现跨框禁用的情况。

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