Javascript 和 HTML 数据列表：管理单引号答案

【问题标题】：Javascript and HTML datalist : manage single quoteJavascript 和 HTML 数据列表：管理单引号
【发布时间】：2021-09-03 12:25:03
【问题描述】：

我的 HTML 数据列表和管理它的 javascript 有问题... 我的目的是从数据列表中更改 HTML“选择”的值。

这是我的数据列表：

<input class="verylarge" id="choix_client" name="choix_client" type="text" list="client" autofocus="" required spellcheck="false" onChange="getSite(this.value);" title="Les simples quotes sont remplacées par des espaces"><br>
<datalist id="client">
<?php
  foreach ($tabCLIENTS as $value) { 
    list($id,$nom) = explode(";",$value);
    $nom = str_replace("'", " ", $nom);
    ?>
    <option data-value="<?=$id?>" value="<?=$nom?>"> 
  <?php } ?>
</datalist>
<input type="hidden" name="idClient" id="idClient">

使用 id 号 ($id)，我想更改下一个 Select 选项菜单的 de 值。我的 Javascript 在数据列表更改时被激活：

function getSite() {
  var NomClient = document.getElementById("choix_client").value;

  var idClient = document.querySelector("#client option[value='" + NomClient + "']").dataset.value;

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

  $.ajax({
    type: "POST",
    url: "getSite.php",
    data: 'client=' + idClient,
    success: function(data) {
      $("#choix_site").html(data);
    }
  });
}

在我的数据列表中，我有一些带有单引号的客户名称...（例如：“L'EQUIPE”）。当我尝试获取数据集值时，这是一个问题：

document.querySelector("#client option[value='"+NomClient+"']").dataset.value;

不可能用 \ 保护单引号，因为 querySelector 找不到合适的选项...

如果有人作为一个想法来帮助我......

【问题讨论】：

为什么不<option value="<?=$id?>"><?=$nom?></option>
您可以通过搜索找到一些解决方案。例如：Escape quotes in JavaScript

标签： javascript html datalist single-quotes

【解决方案1】：

您可以为此使用CSS.escape()：

var NomClient = "L'ÉQUIPE";
var idClient = document.querySelector("#client option[value='" + CSS.escape(NomClient) + "']").dataset.value;

console.log(idClient);

<div id="client">
<select>
  <option value="L'ÉQUIPE" data-value="yes">L'ÉQUIPE</option>
  <option value="Libération">Libération</option>
  <option value="Marianne">Marianne</option>
</select>
</div>

【讨论】：

【解决方案2】：

试试这个

function getSite() {
  var NomClient = $("#choix_client").val()

  var idClient = $("#client option").filter(function() { return this.textContent.trim() === NomClient }).val()

  $('#idClient').val(idClient);

  $.ajax({
    type: "POST",
    url: "getSite.php",
    data: 'client=' + idClient,
    success: function(data) {
      $("#choix_site").html(data);
    }
  });
}

   <option value="<?=$id?>"><?=$nom?></option>

【讨论】：