【问题标题】：How to display only the text in datalist HTML5 and not the value?如何仅显示 datalist HTML5 中的文本而不显示值？
【发布时间】：2014-10-26 07:39:55
【问题描述】：

这是一个例子：

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">1</option>
    <option value="Firefox">2</option>
    <option value="Chrome">3</option>
    <option value="Opera">4</option>
    <option value="Safari">5</option>
</datalist>

http://jsfiddle.net/j7ehtqjd/1/

我想要实现的是，当我点击输入元素时，不会显示 value，而只会显示 text（即 1、2、3、4 , 5)。 IE。该值应隐藏，就像使用一般下拉菜单（<select> 元素）一样。

这个自动完成功能是必要的，否则我会选择正常的下拉菜单。

【问题讨论】：

您可以将value移动到另一个参数（例如data-value）并将1,2,3,4,5设置为value。
但我需要使用 jquery 将值发送到后端。
你可以发送data-value而不是value
我刚刚注意到该值未读取
你能告诉我如何发送数据值吗，我用 - $("#browsers").val()

标签： jquery html drop-down-menu html-datalist

【解决方案1】：

编辑、更新

跟随摄政

尝试 (v3)

html

<input id="selected" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="InternetExplorer" value="1"></option>
    <option data-value="Firefox" value="2"></option>
    <option data-value="Chrome" value="3"></option>
    <option data-value="Opera" value="4"></option>
    <option data-value="Safari" value="5"></option>
</datalist>
<input id="submit" type="submit">

$(document).ready(function() {

var data = {}; 
$("#browsers option").each(function(i,el) {  
   data[$(el).data("value")] = $(el).val();
});
// `data` : object of `data-value` : `value`
console.log(data, $("#browsers option").val());


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

jsfiddle http://jsfiddle.net/guest271314/j7ehtqjd/13/

【讨论】：

如何检索价值并提前发送我曾经键入 $("#browsers").val()。
@Cerebus1504 好吧，也许应该添加我的问题评论中的fiddle 以回答其完整性
好的，我会试试的，我不明白
是否可以不提数据值，而是根据我们的选择动态获取它？
@Cerebus1504 你是什么意思？我们根据我们选择的value 动态获取data-value。 @guest271314，我希望答案现在对 OP 来说已经足够了。至少我投了赞成票。

【解决方案2】：

在没有 jQuery 等依赖项的情况下执行此操作的一种非常混乱的方法（编辑：我意识到 OP 正在使用 jQuery，但无论是否使用 jQuery，此方法都可以很好地集成，因此可能会帮助其他不使用的人)。

首先，交换你的值和文本节点，如下所示：

<input list="browsers" name="browser" id="my_input">
  <datalist id="browsers">
    <option value="Internet Explorer">1</option>
    <option value="Firefox">2</option>
    <option value="Chrome">3</option>
    <option value="Opera">4</option>
    <option value="Safari">5</option>
  </datalist>
  <input type="submit">

这可确保输入始终为用户显示正确的值。然后添加一些 JavaScript 来检查对应值的文本节点，如下所示：

let $input = document.getElementById('my_input');
let $datalist = document.getElementById('browsers');

$input.addEventListener('change', () => {
  let _value = null;

  let input_value = $input.value;
  let options = $datalist.children;
  let i = options.length;

  while(i--) {
    let option = options[i];

    if(option.value == input_value) {
      _value = option.textContent;
      break;
    }
  }

  if(_value == null) {
    console.warn('Value does not exist');
    return false;
  }

  console.log('The value is:', _value );
});

您也可以将'change' 事件监听器更改为'keyup'，以获得实时反馈。而不是console.log('The value is:', _value )，您可以简单地添加一个额外的hidden 输入来存储值，从而允许您发送值和id。

这使用现代 JavaScript 表示法，但要使其向后兼容，只需将 'change', () => { 调用更改为 'change', function() { 并将 let 更改为 var。

更新：使用 ES6

比上面稍微更新的答案

const input = document.getElementById('my_input');
const list = document.getElementById('browsers');

input.addEventListener('change', () => {
  const {value: inputVal} = input
  const children = Array.from(list.children)

  // Fetch matched elem
  const [matchedElem] = children.filter(({value}) => value === inputVal)
  
  // If element doesn't exist, no matches
  if(!matchedElem) {
    console.log('No matches found')
    
    return
  }
  
  // Do whatever
  console.log('Matched value for', matchedElem.value, 'is', matchedElem.textContent)
});

<input type="search" list="browsers" name="browser" id="my_input">

<datalist id="browsers">
  <option value="Internet Explorer">1</option>
  <option value="Firefox">2</option>
  <option value="Chrome">3</option>
  <option value="Opera">4</option>
  <option value="Safari">5</option>
</datalist>

<input type="submit">

【讨论】：

【解决方案3】：

虽然我会为这些答案添加一个较短的 Vanilla JS 版本。这将隐藏真实值，但在提交项目时，它将在表单上将其替换为您想要的值。

<input id="selected" list="browsers" name="browser" >
<datalist id="browsers">
    <option data-value="InternetExplorer" value="1"></option>
    <option data-value="Firefox" value="2"></option>
    <option data-value="Chrome" value="3"></option>
    <option data-value="Opera" value="4"></option>
    <option data-value="Safari" value="5"></option>
</datalist>
<input id="submit" type="submit">```

<script>
function getRealValue(ele){
  var dl=ele.list.options;
  for (var x=0;x<dl.length;x++){
    if (dl[x].value==ele.value){
      ele.value=dl[x].dataset.value;
      return dl[x].dataset.value;
    }
  }
}
</script>

【讨论】：