使用select2选择值时如何获取动态生成的span元素ID

算力阿峰

2026-9-25

问题根因

查找span的上下文错误：$('span', this)中this指向的是#for-transfer下拉框元素，你创建的span是挂载在#form-for-transfer-inputs容器下，不在下拉框的子节点范围内，因此无法匹配到目标元素。
创建span时没有关联select2选中项的标识，取消选中时无法直接对应到要删除的节点。

修改方案

第一步：调整选中事件的span创建逻辑，给span增加自定义属性存储选中项的唯一标识

优先用选项的唯一id做标识，无唯一id时可以用选项文本：

let i = 0;

$('#for-transfer').on('select2:select', function (e) {
  i += 1;
  let data = e.params.data;

  $('<label>').attr({
    class: 'inp',
    for: 'inp'
  }).appendTo('#form-for-transfer-inputs');

  // 新增自定义属性存储选中项标识
  $('<span>').attr({
    id: 'med-text' + i,
    'data-select2-option-id': data.id // 若选项无唯一id，可替换为'data-select2-option-text': data.text
  }).text(data.text).appendTo('#form-for-transfer-inputs');

  $('<input>').attr({
    type: 'number',
    id: 'med' + i,
    name: 'med' + i,
  }).appendTo('#form-for-transfer-inputs');
});

第二步：调整取消选中事件的匹配逻辑，通过自定义属性定位目标span

$('#for-transfer').on('select2:unselect', function (e) {
  let data1 = e.params.data;
  // 通过自定义属性匹配对应span，若存的是文本则把属性名换成data-select2-option-text
  let targetSpan = $(`#form-for-transfer-inputs span[data-select2-option-id="${data1.id}"]`);
  // 即可获取目标span的id
  let spanId = targetSpan.attr('id');
  
  // 如果需要同时删除关联的label、input和span，直接执行下面的代码即可
  targetSpan.prev('label').remove();
  targetSpan.next('input').remove();
  targetSpan.remove();
});