jQuery获取多选下拉框选中项文本时如何避免结果直接拼接

你遇到的多选文本直接拼接的问题，是jQuery .text() 方法的默认设计行为：

• 当选择器仅匹配到单个DOM元素时，方法返回该元素的文本内容
• 当选择器匹配到多个DOM元素时，方法会直接将所有匹配元素的文本首尾拼接成一个字符串返回，不会自动插入任何分隔符

你当前代码单选中表现正常，就是因为单选状态下option:selected仅匹配1个DOM节点；多选时匹配到多个节点，就触发了默认的拼接逻辑，才会出现Option 1Option 2这类无分隔的拼接结果。

不要直接对多选匹配得到的jQuery集合调用.text()，而是通过遍历把每个选中项的文本收集为独立的数组元素，后续可以完全自定义拼接规则：

// 收集所有选中项的文本为独立数组
const selectedTexts = $('#' + label_id)
  .find('option:selected')
  .map(function () {
    // 逐节点获取每个选中option的文本，可按需做首尾空格清理
    return $(this).text().trim();
  })
  .get(); // 调用.get()将jQuery对象转换为原生JS数组

拿到独立的文本数组后，你可以根据场景灵活处理结果：

• 需要拼接为带顿号的展示文本：执行selectedTexts.join('、')
• 需要用空格分隔的拼接结果：执行selectedTexts.join(' ')
• 需要每行展示一个选项：执行selectedTexts.join('\n')
• 需要向接口提交选中值集合：可直接将selectedTexts作为请求参数传入，无需额外拼接

内容的提问来源于stack exchange，提问作者Scott Paterson