Select2 获取选中项的 value 值（而非显示文本）完整实现指南-php教程-PHP中文网

Select2 获取选中项的 value 值（而非显示文本）完整实现指南

本文详解如何在 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() 操作。

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

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

<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 不匹配导致脚本失效。

服务端验证不可省略
前端获取的 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，拒绝非法值

进阶：直接绑定 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()` + 后端白名单校验	安全兜底，杜绝注入风险