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

Question

我希望我的计算在不向使用它的人显示的情况下运行，所以我希望他只看到输入选项的内容，而不是值示例：
<option value="66.48">25 LIGHT</option>当有人 select 这个选项时，他的输入字段应该显示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

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