填充Select2下拉列表后，如何强制保留元素Title的显示？

我之前也碰到过一模一样的问题！核心原因其实很简单：当你用fillProjectSelect()填充完选项后，Select2会自动选中第一个选项，这时候元素的value已经被设置成第一个选项的值了。当用户再次点击这个已经处于选中状态的选项时，因为值没有发生变化，所以原生的change事件不会被触发。

下面给你几个实用的解决方案，你可以根据自己的业务场景选择：

方案一：设置占位符，强制用户主动选择 #

如果你的业务允许用户先看到“请选择”这类提示，而不是直接默认选中第一个选项，这个方案最稳妥：

// 先初始化Select2，开启占位符和清除功能
$('#yourSelectId').select2({
  placeholder: "请选择项目",
  allowClear: true
});

function fillProjectSelect() {
  // 清空原有选项
  $('#yourSelectId').empty();
  
  // 这里替换成你实际填充选项的逻辑，比如从接口获取数据
  $.ajax({
    url: '/your-api-url',
    success: function(data) {
      $.each(data, function(idx, item) {
        $('#yourSelectId').append(`<option value="${item.id}">${item.name}</option>`);
      });
      // 不自动选中第一个选项，保持占位符状态
    }
  });
}

// 绑定change事件，只有当用户主动选择时才触发
$('#yourSelectId').on('change', function() {
  const selectedVal = $(this).val();
  if (selectedVal) {
    // 这里写你加载其他信息的逻辑
    loadRelatedInfo(selectedVal);
  }
});

这样用户必须主动点击选择任何选项（包括第一个），change事件都会正常触发。

方案二：监听Select2的select2:select事件 #

如果业务要求必须默认选中第一个选项，同时希望用户点击这个已选中的选项时也能触发事件，那可以用Select2提供的专属事件select2:select——这个事件不管用户选的是不是当前已选中的选项，只要点击选择动作发生就会触发：

// 初始化Select2（可以保留自动选中第一个的默认行为）
$('#yourSelectId').select2();

function fillProjectSelect() {
  $('#yourSelectId').empty();
  // 填充选项逻辑...
  $.get('/your-api-url', function(data) {
    $.each(data, function(idx, item) {
      $('#yourSelectId').append(`<option value="${item.id}">${item.name}</option>`);
    });
    // 填充后如果需要自动触发一次事件加载初始信息
    $('#yourSelectId').trigger('select2:select');
  });
}

// 绑定select2:select事件替代change事件
$('#yourSelectId').on('select2:select', function(e) {
  const selectedData = e.params.data;
  // 加载其他信息
  loadRelatedInfo(selectedData.id);
});

方案三：填充后手动触发一次change事件（解决初始加载不触发的问题） #

如果你的问题只是初始填充后第一个选项选中但没触发change事件，而用户后续点击其他选项能正常触发，那只需要在填充完选项后手动触发一次change即可：

function fillProjectSelect() {
  $('#yourSelectId').empty();
  // 填充选项...
  $.get('/your-api-url', function(data) {
    $.each(data, function(idx, item) {
      $('#yourSelectId').append(`<option value="${item.id}">${item.name}</option>`);
    });
    // 手动触发change事件，加载第一个选项的对应信息
    $('#yourSelectId').trigger('change');
  });
}

// 正常绑定change事件
$('#yourSelectId').on('change', function() {
  const selectedVal = $(this).val();
  loadRelatedInfo(selectedVal);
});

这个方案适合不需要用户点击已选中选项触发事件，只需要初始加载时自动加载第一个选项信息的场景。

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