jQuery 如何仅显示数据列表 HTML5 中的文本而不显示值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25616625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display only the text in datalist HTML5 and not the value?
提问by Cerebus1504
Here is an example:
下面是一个例子：
<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/
http://jsfiddle.net/j7ehtqjd/1/
What I want to achieve is when I click on the input element the valuewould not be displayed, but ONLY the text(i.e. 1, 2, 3, 4, 5). I.e. the value should be hiddenlike it is with a general dropdown (<select>element).
我想要实现的是，当我单击输入元素时，不会显示值，而只会显示文本（即 1、2、3、4、5）。即该值应该像普通下拉列表（元素）一样隐藏<select>。
This autocomplete feature is necessary, else I would have gone with the normal dropdown.
这个自动完成功能是必要的，否则我会选择正常的下拉菜单。
回答by guest271314
Edit, updated
编辑，更新
Following Regent
跟随摄政
Try (v3)
尝试 (v3)
html
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
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'));
});
});
回答by Oliver
A quite messy method for doing this without dependencies like jQuery (edit: I realise that jQuery is being used by the OP, but this method will integrate fine with or without jQuery, so might helps others who are not).
一个非常混乱的方法，没有像 jQuery 这样的依赖项（编辑：我意识到 jQuery 正在被 OP 使用，但是无论有没有 jQuery，这个方法都可以很好地集成，所以可能会帮助其他人）。
First, swap your value and text nodes around, like so:
首先，交换您的值和文本节点，如下所示：
<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">
This ensures that the input always shows the correct value for the user. Then add in some JavaScript to check the text node of the corresponding value, like so:
这确保输入始终为用户显示正确的值。然后添加一些 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 );
});
You can also change the 'change'event listener to 'keyup'too, to get real-time feedback. And instead of console.log('The value is:', _value )you can simply add in an additional hiddeninput to store the value, thus allowing you to send both the value and id.
您也可以将'change'事件侦听器更改为'keyup'，以获取实时反馈。而不是console.log('The value is:', _value )您可以简单地添加一个额外的hidden输入来存储值，从而允许您发送值和 id。
This uses modern JavaScript notation, but to make it backward compatible just need to change the 'change', () => {call to 'change', function() {and change letto var.
这使用现代 JavaScript 表示法，但要使其向后兼容，只需将'change', () => {调用'change', function() {更改let为var.
回答by jeffpkamp
I though I would add a shorter Vanilla JS version of these answers. This will hide the true value, but when the item is submitted, it will replace it with your desired value on the form.
我虽然会添加这些答案的较短的 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>
