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