從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

鑑於您給我們的起始代碼，您需要做兩件事才能達到這種效果。首先，您需要通過添加事件偵聽器來捕獲對輸入元素的任何更改。

其次，使用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>