我来帮你搞定这个Select2宽度异常的问题！首先得搞清楚你为什么拿到的宽度是1px——这是因为你绑定change事件的.select2元素，其实是被Select2隐藏的原始<select>标签，这个标签在Select2初始化后会被设置成极小的宽度（比如1px）用来隐藏，所以你获取到的不是页面上可见的那个Select2输入容器的宽度。

下面给你两种解决方案，按需选择：

方案一：用Select2专属事件控制宽度（JS方式） #

Select2提供了自己的事件体系，我们可以在选中选项之前获取可见容器的宽度，选中后再强制设置回去：

// 先初始化你的Select2
$('select').select2();

// 用来保存选中前的宽度
let originalWidth;

// 选中选项前触发（此时还没完成选中操作）
$(document).on('select2:selecting', 'select', function() {
  // 获取和当前select绑定的可见Select2容器
  const selectContainer = $(this).next('.select2-container');
  originalWidth = selectContainer.width();
});

// 选中选项后触发，强制重置宽度
$(document).on('select2:select', 'select', function() {
  $(this).next('.select2-container').width(originalWidth);
});

同时别忘了给Select2容器设置初始的100%宽度：

.select2-container {
  width: 100% !important;
}

方案二：纯CSS解决（更简洁稳定） #

其实不用JS也能彻底解决这个问题，通过CSS强制限定容器和下拉框的宽度，避免被长文本撑大：

/* 主容器始终占满父容器宽度 */
.select2-container {
  width: 100% !important;
}

/* 下拉选项容器和主容器同宽 */
.select2-dropdown {
  width: 100% !important;
}

/* 让长选项文本自动换行，避免下拉框被撑宽 */
.select2-results__option {
  white-space: normal;
  word-wrap: break-word;
}

这种方式不需要任何JS逻辑，直接通过CSS约束宽度，更稳定也更容易维护，推荐优先使用。

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