Tengo un problema con mi lista de datos HTML y el javascript para administrarla... Mi propósito es cambiar los valores de una "selección" de HTML de una lista de datos.
Aquí está mi lista de datos:
<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">
Con el número de identificación ($id), quiero cambiar los valores del siguiente menú de opciones Seleccionar. Mi Javascript se activa en el cambio de lista de datos:
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); } }); }
En mi lista de datos, tengo algunos nombres de clientes con comillas simples... (por ejemplo: "L'EQUIPE"). Es un problema cuando trato de obtener el valor del conjunto de datos:
document.querySelector("#client option[value='"+NomClient+"']").dataset.value;
Es imposible proteger la comilla simple con \ porque el querySelector no encontrará la buena opción...
Si alguien como una idea que me ayude...
Puedes usar CSS.escape() para esto:
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>
Prueba esto
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>