如何在输入数据列表中设置默认值并仍然有下拉菜单？

Question

我正在使用datalistHTML 属性来获取下拉输入框：

<input list="orderTypes" value="Book">
<datalist id="orderTypes">
  <option value="Book">
  <option value="Copy">
  <option value="Page">
</datalist>

问题是现在我必须清除输入框才能查看所有下拉值。有没有办法拥有默认值，但在单击下拉图标时仍然查看数据列表中的所有值？

Answer 1

我也有同样的问题。我只是简单地添加了带有默认数据的占位符。在你的例子中：

<input list="orderTypes" name="orderType" id="orderType" placeholder="Book" />

我监听提交事件。如果输入值为空，我使用Book默认值，否则我使用给定值...

$("#mySubmitButton").click(() => {
    // use event prevent here if need...
    const orderType = $("#orderType").val() || "Book";
    console.log(orderType);
});