HTML datalist搭配JavaScript处理含单引号值的异常问题求解

问题根源 #

你当前的报错是因为客户名中携带的单引号会破坏querySelector属性选择器的字符串边界，拼接后的选择器会出现语法错误（比如客户名L'EQUIPE会生成非法选择器#client option[value='L'EQUIPE']），导致匹配失败。

可行解决方案 #

方案1：遍历DOM匹配（最稳妥，无转义问题） #

直接遍历datalist下的所有option做值匹配，完全不需要处理特殊字符转义，兼容性最好，修改后的getSite函数代码如下：

function getSite() {
  const NomClient = document.getElementById("choix_client").value;
  const clientOptions = document.querySelectorAll("#client option");
  let idClient = '';
  
  // 遍历匹配对应option
  for (const opt of clientOptions) {
    if (opt.value === NomClient) {
      idClient = opt.dataset.value;
      break;
    }
  }
  if (!idClient) return; // 匹配不到直接退出，避免后续报错

  document.getElementById('idClient').value = idClient;

  $.ajax({
    type: "POST",
    url: "getSite.php",
    data: {client: idClient}, // 改用对象传参，jQuery会自动处理编码，避免拼接字符串的风险
    success: function(data) {
      $("#choix_site").html(data);
    }
  });
}

方案2：使用CSS.escape()转义选择器值 #

如果不想遍历DOM，可以用原生的CSS.escape()方法处理要匹配的客户名，再拼接到选择器中，示例代码如下：

const NomClient = document.getElementById("choix_client").value;
const escapedNom = CSS.escape(NomClient);
// 选择器改用双引号包裹value值，配合转义后的字符串规避单引号冲突
const idClient = document.querySelector(`#client option[value="${escapedNom}"]`).dataset.value;

优化方案：提前生成全局映射表（性能最优） #

在PHP渲染页面时直接把所有客户的名称和ID的对应关系输出为全局JS对象，选中后直接查表取值，不需要操作DOM，也完全不存在特殊字符匹配问题：

1. 在你的PHP页面中插入这段JS代码生成映射表：

<script>
const clientMap = {
  <?php 
  foreach ($tabCLIENTS as $value) { 
    list($id,$nom) = explode(";",$value);
    // 如果需要保留客户名的单引号，删掉下一行str_replace代码即可
    $nom = str_replace("'", " ", $nom);
    $escapedNom = addslashes($nom); // 转义特殊字符避免JS语法错误
    echo "\"{$escapedNom}\": {$id},";
  } 
  ?>
};
</script>

2. 简化后的getSite函数：

function getSite() {
  const NomClient = document.getElementById("choix_client").value;
  const idClient = clientMap[NomClient];
  if (!idClient) return;
  document.getElementById('idClient').value = idClient;
  // 后续AJAX逻辑不变
}

内容的提问来源于stack exchange，提问作者Sébastien