JavaScript获取Select2选中项name和email返回undefined的解决方法

问题根源 #

Select2的AJAX数据源返回的自定义字段（如你配置的email）默认存储在组件内部缓存中，不会自动写入DOM的<option>标签，因此无法通过jQuery的.find(':selected').text()这类原生DOM方法拿到非默认的id/text字段。你之前使用的$('.txtTeamAddDelete').select2('val',["name", "email"])属于API误用，val方法仅支持读取/设置选中项的ID值，不支持读取自定义属性，因此会返回undefined。

可直接运行的修复代码 #

你只需要修改按钮点击事件的逻辑，使用Select2官方提供的select2('data')方法获取选中项的完整数据对象即可，不需要修改现有HTML和Select2初始化配置：

$(document).ready(function(){
    $('.btnrowAddDelete').click(function(){
        // 读取选中项完整数据，单选模式下返回数组的第一个元素
        const selectedItem = $('.txtTeamAddDelete').select2('data')[0];
        
        // 未选择任何项时拦截操作，避免报错
        if (!selectedItem) {
            alert('请先选择对应条目');
            return;
        }

        // 直接从返回的数据对象取需要的字段
        const itemName = selectedItem.text;
        const itemEmail = selectedItem.email;

        // 追加表格行
        $('.TableAddDelete tbody').append(`<tr><td>${itemName}</td><td>${itemEmail}</td></tr>`);
    });
});

原有代码参考 #

HTML结构 #

<select class="txtTeamAddDelete form-control" name="itemName"></select>
<button type="button" class="btnrowAddDelete">Add New Row</button>

Select2初始化配置（无需修改，已正确返回email字段） #

$('.txtTeamAddDelete').select2({
  placeholder: 'Select an item',
  ajax: {
    url: "{{route('meeting.list-meeting.dataAjax')}}",
    dataType: 'json',
    delay: 250,
    processResults: function (data) {
      return {
        results:  $.map(data, function (item) {
              return {
                  text: item.name,
                  id: item.id,
                  email: item.email
              }
          })
      };
    },
    cache: true
  }
});

实现效果参考 #

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