HTML5 datalist能区分值和选项文本吗？

Question

HTML5表单的列表属性/数据列表元素可以显示一个下拉菜单，供用户选择、编辑和输入文本。使用简洁而强大的代码，您可以同时实现所有这些功能：

<input list="states">
<datalist id="states">
    <option value="One">
    <option value="Two">
</datalist>

然而，如何使这样的表单发送与常规选择/选项（如下）中的选项文本不同的值？

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

- Alex

---

我认为你不能只使用一个输入来完成这个任务。可以通过一个输入来显示文本，再通过第二个隐藏的输入来包含ID，加上一些脚本来同步它们，就可以实现了。 - SWilk

可能是显示datalist标签但提交实际值的重复问题。 - Stephan Muller

Answer 1

看起来你无法仅使用纯HTML完成，需要使用一些JS+CSS辅助。

尝试这个，我希望它能帮到你。

HTML

<input id="datalisttestinput" list="stuff" ></input>
        <datalist id="stuff">
            <option id="3" value="Collin" >
            <option id="5" value="Carl">
            <option id="1" value="Amy" >
            <option id="2" value="Kristal">
        </datalist>

script

function GetValue() {
            var x = $('#datalisttestinput').val();
            var z = $('#stuff');
            var val = $(z).find('option[value="' + x + '"]');
            var endval = val.attr('id');
            alert(endval);
        }

祝你一切顺利 Kumar

- Kumar Shanmugam

---

你在这里明显使用了一些库，请说明是哪一个。此外，@Alex问如何使表单发送所选列表值的标识符。因此，我认为你的脚本应该修改元素，或添加包含ID的隐藏元素。 - SWilk

是的，你说得对，我可以添加一个隐藏元素，只提交包含ID的内容。它的工作方式就像通常的选择选项一样。 - Kumar Shanmugam

Kumar，看起来你的解决方案似乎是从这里@infocyde的答案中复制粘贴的，所以你的笔记中应该标明他的功劳。原链接为：https://dev59.com/_m3Xa4cB1Zd3GeqPha-S?rq=1 - globalSchmidt

我投了赞成票。我稍微扩展了一下功能：如果评估的ID为空，则用户肯定输入了新值，我将使用此值创建现有列表中的新条目（从服务器端获取原始列表）。 - Peter

在Safari实现<datalist>（HTML5？？）之前，它需要有“value”属性存储值，“label”是标签，而不是将它们混合到下拉行中。 “label”属性应该是唯一可见的HTML，而不是它的哈希值。如果没有这个功能，您必须显示值--从<datalist>模型中读取--以及标签。例如，“我的标题1”或“awfj23 @＃$”（它对应于某个哈希表中的“My title 1”）。就像为什么要让用户知道唯一ID是什么一样。 - neaumusic

Answer 2

以下是Kumah修改后的答案，使用隐藏字段来包含最终发送到服务器的值。

$('#inputStates').change(function(){
    var c =  $('#inputStates').val();
    $('#inputStates').val(getTextValue());
    $('#statesHidden').val(c);
});

function getTextValue(){
  var val =  $('#inputStates').val();
  var states = $('#states');
  var endVal = $(states).find('option[value="' + val + '"]');
  //depending on your logic, if endVal is empty it means the value wasn't found in the datalist, you can take some action here
  return endVal.text();
}

- user1587439