jqueryのデータリストから値とテキストを取得する

Question

#place入力の値を取得してその入力に保持しようとしていますが、ファックス番号を#fax入力に入れようとしていますか？両方の値を取得してそれぞれの場所にドロップすることは可能ですか？

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

私たちがあなたに与えた開始コードでこの効果を達成するには、2つのことが必要です。まず、イベントリスナーを追加して、入力要素の変更をキャプチャする必要があります。

第2に、javascriptを使用すると、存在するすべてのものから正しいオプション要素を選択し、ファックス番号（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>