如何在datalist html5中显示文本而不是值

     1 2 3 4 5      

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

我附上了一个小提琴。 请检查。 我想要实现的解决方案是当我单击下拉列表时显示该值，但我希望显示文本1,2,3,4,5。 我必须使用json响应来解决我的实际问题。只应显示文本，并且值应该像常规下拉列表一样隐藏。 此自动完成function是必要的，否则我将使用正常的下拉菜单。

Answer 1

编辑，更新

继丽晶之后

试试（v3）

HTML

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的情况下进行集成，所以可能会帮助其他人没有 ）。

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

这可确保输入始终显示用户的正确值。 然后添加一些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'事件监听器'change'为'keyup' ，以获得实时反馈。 而不是console.log('The value is:', _value )你可以简单地添加一个额外的hidden输入来存储值，从而允许你发送值和id。

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