背景
datalist 标签是 HTML5 中引入的一个元素，允许开发者在 input 元素中设置一组预定义选项。用户输入时，浏览器将展示这些选项的下拉列表，用户可以从中选择或自行输入。
然而，使用 datalist 标签时有一个问题：当用户选择一个选项后，表单提交的是该选项的 label（显示文本），而不是 value（实际值）。这对于需要使用实际值的后台处理逻辑来说是个麻烦。
那么怎样才能在表单提交时获取到 datalist 中选项的实际值呢？
解决方案
我们可以通过 JavaScript 来获取 datalist 选项的实际值，并将其存储在对应的 input 元素的 value 属性中。具体步骤如下：
- 给 input 元素设置一个 id 属性和一个 oninput 事件处理函数。id 属性用于和 datalist 中的选项进行关联，oninput 事件会在用户输入时触发。
------ ----------- -------------- ------------ ------------------------------- --------- ------------- ------- ------------ ---------- ------- ------------ ---------- ------- ------------ ---------- -----------
- 编写 JavaScript 代码，实现 oninput 事件处理函数 setActualValue。该函数会从 datalist 中获取选项的实际值，并将其设置为 input 元素的 value 属性。
-------- --------------------- -
----- -------- - --------------------------------------------
----- ------ - ---------------------------------------- -- ------------ --- -------------
-- -------- -
----------- - -------------
-
-这段代码中，我们首先获取到 datalist 元素和用户输入的值。然后，通过 Array.from 方法将 datalist.options 转为数组，使用 find 方法查找符合条件（即 label 等于用户输入值）的选项。最后，如果找到了匹配选项，就将其实际值设置为 input 的 value 属性。
示例代码
下面是完整的示例代码。
--------- -----
------
------
----- ----------------
----------- -------- ------ --- ------ --- ------ -------------
-------
------
------
------ -----------------------------
------ ----------- -------------- ------------ -------------------------------
--------- -------------
------- ------------ ----------
------- ------------ ----------
------- ------------ ----------
-----------
------- -------------------------
-------
--------
-------- --------------------- -
----- -------- - --------------------------------------------
----- ------ - ---------------------------------------- -- ------------ --- -------------
-- -------- -
----------- - -------------
-
-
---------
-------
-------总结
使用 datalist 标签可以为用户提供方便的输入提示，但是默认提交的是选项的 label 而不是 value，这会带来一些问题。通过 JavaScript 的帮助，我们可以实现在表单提交时获取到 datalist 中选项的实际值。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25941