本文详解如何在 Select2 多选场景中获取并显示 的 value 属性（如分类 slug），而非默认的可见文本（如分类名称），并通过 jQuery 正确绑定到外部输入框，适用于 WooCommerce、WordPress 分类选择等实际开发场景。
本文详解如何在 select2 多选场景中获取并显示 `
在使用 Select2 时，默认行为是将用户看到的 <option></option> 文本（text()）作为选中项的显示内容和回传值。但许多后端逻辑（如 WordPress 的 product_cat 分类处理）依赖的是 value 属性（例如 category-slug），而非展示用的 Category Name。若你发现当前代码中 #test 输入框显示的是“Cat 1, Cat 2”，而你真正需要的是 "cat-1, cat-2" 或 "electronics, accessories"，关键就在数据提取环节——必须调用 .val() 而非 .text()。
✅ 正确做法：使用 .val() 提取 value 值
将你原 JS 中的 change 事件回调修改如下：
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)指向当前初始化的 Select2 元素（即.upsell-basic-multiple），避免硬编码选择器；.find('option:selected')精准定位被选中的原生<option></option>标签；.map(...).get()返回纯数组（非 jQuery 对象），便于后续join()操作；jQuery(el).val()读取的是<option value="..."></option>中的属性值，完美匹配你的 PHP 输出逻辑（esc_attr($category->slug)）。
⚠️ 注意事项与最佳实践
不要混淆 Select2 的
data模式：本文方案基于原生<select></select>+<option></option>的 DOM 驱动模式（推荐用于静态/本地数据）。若你改用data: [...]方式初始化 Select2，则需确保id字段对应value、text字段对应显示名，并在templateSelection中显式返回data.id。PHP 输出需严格转义：你当前已使用
esc_attr($category->slug)，这是正确的。切勿将name直接用作value（易含空格、特殊字符，破坏 HTML 结构或导致 JS 解析异常）。兼容性提醒：该写法兼容 Select2 v4.x 及以上版本，且不依赖
ajax或data配置，轻量可靠。
✅ 完整可运行示例（精简版）
<select class="upsell-basic-multiple" name="upsell-edit-select" multiple style="width: 100%;">
<option value="cat-1">Category One</option>
<option value="cat-2">Category Two</option>
<option value="cat-3">Category Three</option>
</select>
<input type="text" id="test" name="sell" readonly placeholder="Selected slugs will appear here">
<script>
jQuery(document).ready(function() {
jQuery('.upsell-basic-multiple').select2({ placeholder: "Select...", allowClear: true });
jQuery('.upsell-basic-multiple').on('change', function() {
const values = jQuery(this).val() || []; // ✅ 更简洁：.val() 直接返回选中 value 数组！
jQuery("#test").val(values.join(', '));
});
});
</script>? 进阶提示：
jQuery('select').val()在多选<select></select>中天然返回value字符串数组，无需手动遍历option:selected—— 这是最简洁、最健壮的写法，强烈推荐替代.map().toArray()冗余链式调用。
通过以上调整，你的输入框将准确输出 cat-1, cat-2 等 slug 值，无缝对接后端分类处理逻辑，真正实现「所存即所得」。
