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

Question

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

这是我的数据列表：

<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选项菜单的值。我的 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;

无法用 \ 保护单引号，因为查询Select或找不到好的选项...

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

Answer 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>

Answer 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>

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

Javascript and HTML datalist : manage single quote

html

javascript

datalist

single-quotes