显示数据列表标签，但提交实际值

Question

目前HTML5

但是，value属性的实现与

<input list="answers" name="answer">
<datalist id="answers">
  <option value="42">The answer</option>
</datalist>

不同的浏览器对此有不同的处理方式：

选择一个后，输入将填充值，而不是内部文本。我只希望用户在下拉列表和输入中看到文本（“答案”），但在提交时传递值42，就像select一样。

如何使所有浏览器的下拉列表显示




Answer 1

我意识到这可能有点晚了，但我偶然发现了这一点，并想知道如何处理具有多个相同值但不同键的情况（根据大熊的评论）。

所以我稍微修改了Stephan Muller的回答：

具有非唯一值的数据列表：

<input list="answers" name="answer" id="answerInput">
<datalist id="answers">
  <option value="42">The answer</option>
  <option value="43">The answer</option>
  <option value="44">Another Answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

当用户选择一个选项时，浏览器将替换输入。值使用数据列表选项的值，而不是内部文本。

然后，以下代码检查带有该值的选项，将其推入隐藏字段并替换输入。值和内部文本。

document.querySelector('#answerInput').addEventListener('input', function(e) {
    var input = e.target,   
        list = input.getAttribute('list'),
        options = document.querySelectorAll('#' + list + ' option[value="'+input.value+'"]'),
        hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden');

    if (options.length > 0) {
      hiddenInput.value = input.value;
      input.value = options[0].innerText;
      }

});

因此，用户看到的是选项的innerText所说的任何内容，而不是选项中的唯一id。值在提交表单时可用。演示JSFIDLE

Answer 2

我使用的解决方案如下：

<input list="answers" id="answer">
<datalist id="answers">
  <option data-value="42" value="The answer">
</datalist>

然后使用JavaScript访问要发送到服务器的值，如下所示：

var shownVal = document.getElementById("answer").value;
var value2send = document.querySelector("#answers option[value='"+shownVal+"']").dataset.value;

希望能有帮助。

Answer 3

请注意，datalist与select不同。它允许用户输入一个不在列表中的自定义值，如果不先定义它，就不可能为此类输入获取备用值。

处理用户输入的可能方法是按原样提交输入值、提交空白值或阻止提交。这个答案只处理前两个选项。

如果您想完全禁止用户输入，那么select可能是更好的选择。

要在下拉列表中仅显示选项的文本值，我们使用内部文本，并省略值属性。我们要发送的实际值存储在自定义的数据值属性中：

要提交这个data-value，我们必须使用一个

<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来检查文本是否也存在于datist中，并获取其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回答和回答-隐藏，脚本才能知道哪个输入属于哪个隐藏版本。这样就可以在同一个页面上有多个输入，一个或多个数据管理器提供建议。

任何用户输入都按原样提交。要在数据列表中不存在用户输入时提交空值，请更改hiddenInput。值=输入值tohiddenInput。value=”“

jsFiddle示例：普通javascript和jQuery