我们可以在输入字段中显示数据列表的内容而不是它的值吗

如何解决我们可以在输入字段中显示数据列表的内容而不是它的值吗

我希望我的计算在不向使用它的人显示的情况下运行，所以我希望他只看到输入选项的内容，而不是值 例子：
{ "added":[ { "cif_id":"4","bank_code":"140" } ],"modified":[ { "cif_id":"1","bank_code":"111" },{ "cif_id":"2","bank_code":"122" } ],"deleted":[ { "cif_id":"3","bank_code":"130" } ] } 当有人选择此选项时，他的输入字段应显示 25 LIGHT 而不是 666.48。 注意：我不能使用 select，我必须使用 datalist 因为我希望用户通过键入来获取选项，因为它们有 100 个。我可以用数据列表做到这一点吗？ 请指导。

我的代码：

<option value="66.48">25 LIGHT</option>

解决方法

使用选择字段的 selectedIndex 属性获取所选的 <option> 元素作为节点。然后获取该节点的 innerHTML：

var select = document.querySelector("select");
select.onchange = function() {
  var html = this.options[this.selectedIndex].innerHTML
  console.log(html);
}

<select>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

如果您使用的是 <datalist>，您需要手动查找其值与您的 <datalist> 的值匹配的选项：

var input = document.querySelector("input");
var list = document.getElementById("nums");

input.onchange = function() {
  var selected = Array.from(list.options).filter(opt => {
    return opt.value == input.value;
  })[0];
  console.log(selected.innerHTML);
}

<input list="nums"/>

<datalist id="nums">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</datalist>