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

目前大多数主流浏览器（Safari除外）都支持HTML5

元素，这似乎是一种向输入添加建议的有趣方式

但是，

值

属性的实现与

上的内部文本之间似乎存在一些差异。例如：

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

答案

这由不同的浏览器进行不同的处理：

Chrome和Opera:

FireFox和IE 11:

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

42

，就像

select

一样

---

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

的标签（内部文本），但在提交表单时发送

值

属性

请注意，

datalist

与

select

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

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

如果您想完全禁止用户输入，那么

select

可能是更好的选择

---

要在下拉列表中仅显示

选项的文本值

，我们使用内部文本，并省略

值

属性。我们要发送的实际值存储在自定义的

数据值

属性中：

要提交此

数据值

，我们必须使用

。在这种情况下，我们在常规输入中省略

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">

---

脚本需要常规输入和隐藏输入上的id

answer

和

answer hidden

，才能知道哪个输入属于哪个隐藏版本。通过这种方式，可以在同一页面上有多个

输入

s，其中一个或多个

数据列表

s提供建议

任何用户输入都按原样提交。要在数据列表中不存在用户输入时提交空值，请将

hiddenInput.value=inputValue

更改为

hiddenInput.value=”“

---

---

使用JSFIDLE示例：和

我使用的解决方案如下：

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

---

希望能有所帮助。

使用PHP，我找到了一种非常简单的方法。伙计们，就用这个吧

<input list="customers" name="customer_id" required class="form-control" placeholder="Customer Name">
            <datalist id="customers">
                <?php 
    $querySnamex = "SELECT * FROM `customer` WHERE fname!='' AND lname!='' order by customer_id ASC";
    $resultSnamex = mysqli_query($con,$querySnamex) or die(mysql_error());

                while ($row_this = mysqli_fetch_array($resultSnamex)) {
                    echo '<option data-value="'.$row_this['customer_id'].'">'.$row_this['fname'].' '.$row_this['lname'].'</option>
                    <input type="hidden" name="customer_id_real" value="'.$row_this['customer_id'].'" id="answerInput-hidden">';
                }

                 ?>
            </datalist>

---

上面的代码允许表单携带所选选项的id。

当单击按钮进行搜索时，您可以在没有循环的情况下找到它。
只需在选项中添加一个具有所需值的属性（如

id

），然后搜索特定的属性

$('#search_wrapper button').on('click', function(){
console.log($('option[value="'+ 
$('#autocomplete_input').val() +'"]').data('value'));
})

---

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

所以我稍微修改了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">

因此，用户可以看到选项的

innerText

所说的任何内容，但是

选项的唯一id.value

在表单提交时可用。

要获取text（）而不是val（）请尝试：

$("#datalistid option[value='" + $('#inputid').val() + "']").text();

---

我认为Firefox和IE11在这里是错误的；根据规范和，只要声明了

value=“”

，则

value=“”

应该优先于标记中的字符串。所以建议将“答案”设为value属性。@TylerH No-Firefox和IE11在这里是正确的：label属性为元素提供了一个标签。选项元素的标签是标签内容属性（如果有）的值，或者，如果没有，则是元素的文本IDL属性的值@easwee只是说如果有标签，标签应该是标签中的内容，如果有值，值应该是值中的内容。它没有指定哪个优先。如何处理具有相同innertext但不同数据值的选项？e、 就我所知，没有办法区分这两种选择。因为没有用户事件可听，所以不可能知道他们实际上选择了这两个事件中的哪一个；我们只知道输入字段的值是多少。@StephanMuller对于像我这样学习更多HTML5的人来说，这是一个很好的答案，谢谢！提交后如何清除演示的文本框？纯jquery document.querySelector（'input[list'））.addEventListener（'input'，function（e）{var value=$（this.val（）；var list=$（this.attr（'list'）；var id=$（this.attr（'id'）；$（'#list+'option'））。each（function（）{if（$（this.val（）=）value）{$（'#'+id+'-hidden'）.val（$（this.attr（'data-value'））；}}）@StephanMuller感谢分享，非常有用，我正在按照您的编码运行，但是我只是在输入中使用退格时才获得数据值，而不是在提交或甚至选择不同的项目时，会出现什么问题？我没有定义任何原因？请在每一步使用console.log进行故障排除。确保您使用的id值与您使用的id值相同你正在调用。也检查半个字符。这个解决方案真是个好主意！-我能够在几分钟内实现这个解决方案。首先，我用属性

data value=“1”

更新了我的

input

元素。然后，我在获取和使用该值的地方编写了以下代码块：

if（typeof>）$（this.attr（'data-value'）！='undefined'）{var id=$（this.attr（'name'）；val=$（'#'+id.）.find（'option[value=“'+val+'”）））.attr（'data-value'）；}

但是如果您有两个带有不同字符的相等字幕怎么办

<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;
      }

});

$("#datalistid option[value='" + $('#inputid').val() + "']").text();