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

Question

我希望我的计算在不向使用它的人显示的情况下运行，所以我希望他只看到输入选项的内容，而不是值 例如：
<option value="66.48">25 LIGHT</option> 当有人选择此选项时，他的输入字段应显示 25 LIGHT 而不是 666.48。 注意：我不能使用 select，我必须使用 datalist 因为我希望用户通过键入来获得选项，因为它们有 100 个。我可以用数据列表做到这一点吗？ 请指导。

我的代码：

  <form onsubmit="return false" oninput="    totalamount.value = Math.round(((Item.value * Quantity.value - (Item.value * Quantity.value *Percentage.value /100))+ Number.EPSILON) * 100) / 100 ;">
Percentage<input name="Percentage" id="Percentage" type="number">
<br />
<section class="container">
 <div class="one">
  Item<br/><input list="items" type="text" name="Item" id="Item" width="70%">
 </div>

 <div class="two">
  Quantity <br/><input name="Quantity" id="Quantity" type="number">
 </div>
</section>
<br/>
Total amount <output name="totalamount" id="totalamount" for="Item Quantity Percentage"></output>
</form>
<datalist id="items">
<option value="66.48">25 LIGHT</option>
<option value="88.64">25 MEDIUM</option>
<option value="103.41">25 HEAVY</option>
<option value="93.54">Regal 19/1.0</option>
<option value="69.8">Regal 19/1.2</option>
<option value="69.8">Regal 19/1.4</option> </datalist>

Answer 1

使用选择字段的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>