设置隐藏的数据列表选项值

Question

在下面的代码片段中，我有两种选择项目的方法：使用数据列表输入和使用选项进行传统选择。

select 元素隐藏选项值，我们仍然可以使用 this.value 获取它。但是用datalist，实际显示的是value，option的文本内容是作为二级标签显示的。

What I’d like is to have the input+datalist approach behave like a traditional select, where “Foo” and “Bar” are shown as options that when selected have values of “1” and “2” respectively.

我还添加了一个重复的名称“Foo”，值为“3”。这是为了表明任何解决方案都不能依赖于唯一的选择。

 <input list="options" onchange="console.log(this.value)"/>
<datalist id="options">
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

<select onchange="console.log(this.value)">
  <option value=""></option>
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</select>

原文由 Rick Viscomi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 data-value 和 jquery 来隐藏您的价值。

例如：

 $(document).ready(function() {

    $('#submit').click(function()
    {
        var value = $('#selected').val();
        alert($('#browsers [value="' + value + '"]').data('value'));
    });
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="selected" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="1" value="InternetExplorer"></option>
    <option data-value="2" value="Firefox"></option>
    <option data-value="3" value="Chrome"></option>

</datalist>
<input id="submit" type="submit">

小提琴手

感谢@guest271314

原文由 HybrisHelp 发布，翻译遵循 CC BY-SA 3.0 许可协议