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