JavaScript中如何处理含撇号下拉框选中值及多选拼接问题

问题根源分析 #

1. .val()截断内容：下拉框的<option>标签value属性未正确转义撇号。比如直接写value="Brian O'Connar"时，HTML会把撇号识别为属性值的结束符，导致value实际只取到Brian O。
2. .text()多选无分隔：直接调用.text()会把所有选中选项的文本直接拼接，不会自动添加分隔符。

方案一：修复<option>的value属性（推荐） #

先确保后端生成<option>时，将撇号转义为HTML实体'，示例：

<option value="Brian O&#39;Connar">Brian O'Connar</option>
<option value="Nishinoya&#39;O">Nishinoya'O</option>

修复后，.val()就能正常获取完整的多选值数组，代码调整如下：

else if(newClaimCols[key]== "assigned_to_full_name_primary") {
  var selectedValues = $("#claim" + newClaimCols[key] + "filter").val();
  // 多选时selectedValues是数组，如["Brian O'Connar", "Nishinoya'O"]
  
  if (selectedValues && selectedValues.length > 0 ) {
    temp.push(...selectedValues);
  }
}

方案二：遍历选中选项获取文本（不修改value时用） #

如果无法修改<option>的value，可以遍历每个选中的<option>元素，单独收集文本：

else if (newClaimCols[key] == "assigned_to_full_name_primary") {
  // 遍历所有选中的option，收集每个的文本
  var selectedTexts = $("#claim" + newClaimCols[key] + "filter option:selected").map(function() {
    return $(this).text();
  }).get();
  // selectedTexts是数组：["Brian O'Connar", "Nishinoya'O"]
  
  if (selectedTexts.length > 0 ) {
    // 逐个push到temp，或用分隔符拼接后push
    temp.push(...selectedTexts);
    // 若需要拼接成字符串：temp.push(selectedTexts.join(', '));
  }
}

内容的提问来源于stack exchange，提问作者Nilanshu Vishesh