HTML5 datalist 可以区分值和选项文本吗？答案

【问题标题】：Can HTML5 datalist differentiate value and option text?HTML5 datalist 可以区分值和选项文本吗？
【发布时间】：2013-08-30 03:27:31
【问题描述】：

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>

【问题讨论】：

我认为你不能只用一个输入来做到这一点。可以通过一个输入来显示文本，第二个输入隐藏，其中包含 ID。那，加上一些脚本来同步它们。
Show datalist labels but submit the actual value的可能重复

标签： html select html-datalist

【解决方案1】：

如果不使用一些 JS+CSS 帮助，您似乎无法使用纯 HTML。

试试这个，希望对你有帮助。

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>

脚本

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

最好的祝愿库马尔

【讨论】：

你已经清楚地在这里使用了一些库，所以请说明是哪一个。此外，@Alex 询问如何使表单发送所选列表值的标识符。所以我认为你的脚本应该修改元素，或者添加包含 id 的隐藏元素。
是的，你的权利，我可以添加隐藏元素发布仅包含 ID。它的工作方式与通常的选择选项一样。
Kumar，@infocyde 的功劳似乎应该在你的笔记中，因为你的解决方案看起来像是他的答案的剪切和粘贴：stackoverflow.com/questions/14532398/…
我投了赞成票。我稍微扩展了功能：如果评估的 id 为空，那么用户肯定输入了一个新值，我将使用它在现有列表中创建一个新条目（我从中获取原始列表）[在服务器上边]。
在 safari 实现 (html5??) 之前，它需要有 "value" 属性存储值，并且 "label" 是标签，不要将它们混合到下拉行中。 “标签”属性应该是唯一可见的 HTML，而不是它的哈希值。如果没有此功能，您将显示值 - 可从模型读取 - 以及标签。例如“我的标题 1”或“awfj23@#$”（对应于某些哈希表中的我的标题 1）。比如你为什么想让你的用户知道唯一ID是什么

【解决方案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();
}

【讨论】：