目前是 HTML5 <datalist>
大多数主流浏览器(Safari 除外)都支持该元素,这似乎是一种向输入添加建议的有趣方式。
然而,value
的实现似乎存在一些差异。 <option>
上的属性和内部文本.例如:
<input list="answers" name="answer">
<datalist id="answers">
<option value="42">The answer</option>
</datalist>
这在不同的浏览器中有不同的处理方式:
Chrome 和 Opera:
FireFox 和 IE 11:
选择一个后,输入将填充值而不是内部文本。我只希望用户在下拉列表和输入中看到文本(“答案”),但传递值 42
提交时,就像 select
会的。
如何让所有浏览器的下拉列表显示 <option>
的标签(内部文本) s,但发送 value
提交表单时的属性?
最佳答案
请注意 datalist
与 select
不同.它允许用户输入不在列表中的自定义值,如果不先定义它,就不可能为此类输入获取替代值。
处理用户输入的可能方法是按原样提交输入的值、提交空白值或阻止提交。此答案仅处理前两个选项。
如果你想完全禁止用户输入,可能是select
会是更好的选择。
仅显示 option
的文本值在下拉列表中,我们使用内部文本并省略 value
属性。我们要发送的实际值存储在自定义 data-value
中属性:
提交此data-value
我们必须使用 <input type="hidden">
.在这种情况下,我们省略了 name="answer"
在常规输入上并将其移动到隐藏副本。
<input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
<option data-value="42">The answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">
这样,当原始输入中的文本发生变化时,我们可以使用 javascript 检查文本是否也出现在 datalist
中。并获取它的 data-value
.该值被插入到隐藏的输入中并提交。
document.querySelector('input[list]').addEventListener('input', function(e) {
var input = e.target,
list = input.getAttribute('list'),
options = document.querySelectorAll('#' + list + ' option'),
hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
inputValue = input.value;
hiddenInput.value = inputValue;
for(var i = 0; i < options.length; i++) {
var option = options[i];
if(option.innerText === inputValue) {
hiddenInput.value = option.getAttribute('data-value');
break;
}
}
});
ID answer
和 answer-hidden
脚本需要在常规和隐藏输入上知道哪个输入属于哪个隐藏版本。这样就可以有多个 input
与一个或多个 datalist
在同一页上提供建议。
任何用户输入都按原样提交。要在数据列表中不存在用户输入时提交空值,请更改 hiddenInput.value = inputValue
至 hiddenInput.value = ""
工作 jsFiddle 示例:plain javascript和 jQuery
关于javascript - 显示数据列表标签但提交实际值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29882361/