如何使用纯 javascript 在 datalist 选项上获取文本

Question

我有 datalist 选项，我想获取文本值而不是值，下图是示例，我想获取 Kuruha 作为文本而不是 1 值，如何正确获取它？

html代码：

        <datalist id="in">
        <option value="1">Kuruha</option>
        <option value="2">Agencia</option>
        </datalist>
        <input list="in" id=int>

图片示例

Answer 1

您可以像往常一样在input元素上绑定change eventListener，然后访问它的datalist 。

到达那里后，您可以使用find对其进行过滤以提取所选选项（如果有），最后使用textContent获取文本。

 document.getElementById('int').addEventListener('change', function() { let selectedOpt = Array.from(this.list.options).find(item => item.value == this.value); if (typeof selectedOpt == 'undefined') { document.getElementById('results').innerHTML = ''; } else { document.getElementById('results').innerHTML = selectedOpt.textContent; } });

 <datalist id="in"> <option value="1">Kuruha</option> <option value="2">Agencia</option> </datalist> <input list="in" id="int"> <div id="results"></div>