Récupération de la valeur et du texte d'une base de données dans jquery

Question

J'essaie d'obtenir la valeur de l'entrée #place et de la conserver dans cette entrée, mais le numéro de fax doit-il entrer dans l'entrée #fax? Est-il possible d'obtenir les deux valeurs et les déposer dans les emplacements respectifs.

input type="text" id="place" list="places"> 
<datalist id="places"> 
    <option value="WVC">503-882-1212</option> 
    <option value="HAM">612-883-1414</option> 
    <option value="WON">317-445-8585</option> 
</datalist> 
<br> 
<input type="text" id="fax"> 

Answer 1

Il y a deux choses que vous devez faire pour obtenir cet effet étant donné le code de départ que vous nous avez donné. Tout d'abord, vous devez capturer toute modification de votre élément d'entrée en ajoutant un écouteur d'événement. Deuxièmement, en utilisant javascript, il vous suffit de sélectionner l'élément d'option correct parmi tous ceux présents, et d'extraire le numéro de fax, qui est les balises innerHTML.

<input type="text" id="place" list="places"> 
<datalist id="places"> 
    <option value="WVC">503-882-1212</option> 
    <option value="HAM">612-883-1414</option> 
    <option value="WON">317-445-8585</option> 
</datalist> 
<br> 
<input type="text" id="fax"> 
<script> 
    document.querySelector('input').addEventListener('input', function() { 
     var val = document.querySelector('input').value; 
     faxNum = document.querySelectorAll('option[value="' + val + '"]')[0].innerHTML; 
     document.querySelector('#fax').value = faxNum; 
    }); 
</script>