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

问题描述

我希望我的计算在不向使用它的人显示的情况下运行，所以我希望他只看到输入选项的内容，而不是值 例子：
{ "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>