Question

以下是一个例子：

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

我想要实现的是当我点击输入元素时，不会显示值，而只会显示文本（即1,2,3,4 ，5）。即该值应隐藏，就像使用常规下拉列表（<select>元素）一样。

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

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

JS

$(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/

Answer 2

这是一个非常混乱的方法，没有像jQuery这样的依赖（编辑：我意识到OP正在使用jQuery，但是这个方法可以在有或没有jQuery的情况下很好地集成，所以可能会帮助那些不是< / em>的）。

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

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

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

如何只显示datalist HTML5中的文本而不是值？

3 个答案: