本文详解如何在 Select2 多选场景中正确获取并提交选项的 value 属性（如分类 slug），而非默认的 text 内容，避免前端展示与后端接收不一致问题。

本文详解如何在 select2 多选场景中正确获取并提交选项的 `value` 属性（如分类 slug），而非默认的 `text` 内容，避免前端展示与后端接收不一致问题。

在使用 Select2 时，一个常见误区是：下拉框显示的是 <option></option> 的文本内容（如 "Cat 1"），但业务逻辑往往需要其 value 属性（如 "cat-1" 或分类 slug）用于后续提交、存储或 API 调用。你当前的代码中通过 .text() 提取选中文本，导致 #test 输入框填充的是 "Cat 1, Cat 2"，而非期望的 "cat-1, cat-2" —— 这正是问题根源。

✅ 正确做法：使用 .val() 获取 value 值

只需将事件监听中的 .text() 替换为 .val() 即可：

jQuery(document).ready(function() {
  jQuery('.upsell-basic-multiple').select2({
    placeholder: "Select Categories",
    maximumSelectionLength: 3,
    tokenSeparators: [',', ' ', ';'],
    allowClear: true
  }).on('change', function(e) {
    // ✅ 关键修改：使用 .val() 获取 option 的 value 属性（即 slug）
    const selectedValues = jQuery(this).find('option:selected').map((i, el) => jQuery(el).val()).get();
    jQuery("#test").val(selectedValues.join(', '));
  });
});

? 说明：

• jQuery(this) 指向当前初始化的 <select></select> 元素，比硬编码选择器（如 ".test-basic-multiple"）更健壮、可复用；
• .find('option:selected') 精准定位当前被选中的 <option></option> 元素；
• .val() 直接读取原生 option.value，完美匹配你在 PHP 中输出的 esc_attr($category->slug)；
• .map(...).get() 返回标准 JavaScript 数组（非 jQuery 对象），便于 .join() 操作。

? 补充建议：增强健壮性与可维护性

1. 统一初始化选择器
   你的 HTML 中存在两个不同 class 的 <select></select>：.test-basic-multiple（静态示例）和 .upsell-basic-multiple（PHP 动态生成）。请确保 JS 初始化指向实际使用的元素：

   <!-- PHP 输出后应为 -->
   <select class="upsell-basic-multiple" name="upsell-edit-select" multiple>
     <option value="cat-1">Cat 1</option>
     <option value="cat-2">Cat 2</option>
     <!-- ... -->
   </select>

   对应 JS 中初始化 '.upsell-basic-multiple' —— 避免因 class 不匹配导致脚本失效。

2. 服务端验证不可省略
   前端获取的 value 仅用于展示或轻量交互，关键业务逻辑（如分类绑定、权限校验）必须在 PHP 后端二次验证，防止恶意篡改：

   $submitted_slugs = array_map('sanitize_key', explode(',', $_POST['sell'] ?? ''));
   $valid_terms = get_terms([
       'taxonomy' => 'product_cat',
       'slug'     => $submitted_slugs,
       'fields'   => 'ids'
   ]);
   // 仅处理 $valid_terms 中存在的 slug，拒绝非法值

3. 进阶：直接绑定 Select2 数据源（推荐大型项目）
   若需更灵活控制（如异步加载、动态格式化），可绕过原生 <select></select>，直接传入 data 数组：

   const categoryData = <?php echo wp_json_encode($product_categories); ?>;
   const select2Data = categoryData.map(cat => ({
     id: cat.slug,      // → 将作为 value 提交
     text: cat.name     // → 显示文本
   }));
   jQuery('.upsell-basic-multiple').select2({
     data: select2Data,
     placeholder: "Select Categories",
     allowClear: true
   }).on('change', function() {
     const values = jQuery(this).val(); // 直接返回字符串数组，如 ['cat-1', 'cat-2']
     jQuery("#test").val(values.join(', '));
   });

✅ 总结

场景	推荐方法	说明
简单静态/动态 <select></select>	.find('option:selected').val()	最轻量、兼容性最佳，适用于绝大多数 WordPress/PHP 场景
需自定义渲染或远程数据	data 配置 + .val()	更可控，支持搜索高亮、图标等高级功能
关键业务字段	前端 .val() + 后端白名单校验	安全兜底，杜绝注入风险

只要将 .text() 改为 .val()，即可让 Select2 “真正提交你想要的值”，而非“看起来像的值”。这是前端与后端数据契约对齐的第一步，也是专业表单开发的必备实践。