Select2下拉框搜索功能正常但选中值无法填充输入框问题求助

AI 小北

2026-10-2

问题原因

Select2初始化后会改写原生select的DOM结构，原生change事件可能无法正常触发，需使用Select2官方提供的select2:select事件监听选择操作
现有填充逻辑和Select2初始化逻辑分离，事件绑定优先级不符合要求
PHP输出option的value时末尾多了多余空格，会导致拆分后的值出现不必要的空白字符

修复步骤

1. 修正PHP输出的option代码

删除option value末尾的多余空格，避免拆分值异常：

// 原错误写法（末尾多了空格）
echo '<option value="'.htmlspecialchars ($row['Description']).'|'.($row['Sell_Price']).'|'.($row['Cost_Price']).'|'.($row['Qty']).'|'.($row['SKU']).' ">'.($row['SKU']).'</option>';
// 修正后写法
echo '<option value="'.htmlspecialchars ($row['Description']).'|'.$row['Sell_Price'].'|'.$row['Cost_Price'].'|'.$row['Qty'].'|'.$row['SKU'].'">'.$row['SKU'].'</option>';

2. 替换原有JS代码

删除原来的原生JS和测试用jQuery代码，使用以下整合代码，同时完成Select2初始化和选中填充逻辑：

$(document).ready(function(){
  // 初始化Select2
  $("#selUser").select2();
  // 监听Select2选中事件
  $("#selUser").on('select2:select', function(e) {
    const selectVal = $(this).val();
    // 选中默认空选项时跳过处理
    if (!selectVal) return;
    const valArr = selectVal.split("|");
    // 填充到对应输入框
    $('.desc').val(valArr[0] || '');
    $('.sell_price').val(valArr[1] || '');
    $('.cost_price').val(valArr[2] || '');
    $('.qty').val(valArr[3] || '');
    $('.CPUsku').val(valArr[4] || '');
  });
});