jQuery下Select2单选框选择事件失效及获取选中值问题求助

嘿，我来帮你搞定这个问题！你遇到的核心痛点是：默认的change事件在多选Select2控件里返回的是所有已选中值的集合，没法直接揪出最后一次选中的那个选项。不过Select2本身提供了更精准的专属事件，刚好能解决这个需求，下面分场景给你讲清楚：

一、用对事件是关键 #

Select2的select2:select事件会在每一次选中单个选项时触发——不管是单选还是多选控件都适用！这个事件的回调参数里直接带着当前选中的选项数据，是获取最后选中项的最优解。

二、完整可运行的代码示例 #

先假设你的HTML结构是这样的：

<form>
  <!-- 单选Select2控件 -->
  <select id="single-select" class="select2">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
  
  <!-- 多选Select2控件 -->
  <select id="multi-select" class="select2" multiple>
    <option value="a">多选A</option>
    <option value="b">多选B</option>
    <option value="c">多选C</option>
  </select>
  
  <!-- 需要AJAX填充的目标控件 -->
  <input type="text" id="target-input" placeholder="等待AJAX填充">
</form>

对应的JavaScript代码：

// 先初始化所有Select2控件
$('.select2').select2();

// 绑定select2:select事件，监听每一次选中操作
$('.select2').on('select2:select', function(e) {
  // 拿到最后选中项的value
  const lastSelectedVal = e.params.data.id;
  // 要是需要文本的话也能拿
  const lastSelectedText = e.params.data.text;
  
  console.log('最后选中的值：', lastSelectedVal);
  
  // 发起AJAX请求填充其他控件
  $.ajax({
    url: '/your-api-url', // 替换成你的实际接口地址
    method: 'GET',
    data: { selectedValue: lastSelectedVal },
    success: function(res) {
      // 这里示例填充input，你可以根据需求改成其他控件
      $('#target-input').val(res.content);
    },
    error: function(xhr, status, err) {
      console.error('AJAX请求出错啦：', err);
    }
  });
});

三、你之前示例失效的常见原因 #

1. 事件用错了：如果用了change事件，多选场景下只能拿到所有选中值的数组，没法区分最后一个；
2. 资源引入不完整：你提供的示例里Select2的JS链接没写完，导致插件没正常加载；
3. AJAX配置问题：接口地址、参数格式不对，导致请求失败。

另外，如果需要处理取消选中的场景，你可以绑定select2:unselect事件，逻辑和select2:select一致，参数里的e.params.data.id就是取消选中的项的值。

内容的提问来源于stack exchange，提问作者Danny G Smith