如何只显示datalist HTML5中的文本而不显示值？
如何只显示datalist HTML5中的文本而不显示值？
提问于 2014-09-02 13:46:06
下面是一个示例：
<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/
我想要实现的是，当我点击input元素时，值不会显示，而只会显示文本(即1，2，3，4，5)。也就是说，应该像使用常规下拉菜单(<select>元素)一样隐藏该值。
这个自动补全功能是必要的，否则我会选择普通的下拉列表。
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-09-02 14:18:33
编辑，更新
关注Regent
尝试(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'));
});
});Stack Overflow用户
发布于 2018-05-25 00:15:42
这是一个相当混乱的方法，不用依赖jQuery (编辑:我意识到OP正在使用jQuery，但是这个方法可以很好地集成jQuery或不集成with，所以可能会帮助其他不使用with的人)。
首先，交换value和text节点，如下所示：
<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'，以获得实时反馈。您可以简单地添加一个额外的hidden输入来存储值，从而允许您同时发送值和id，而不是console.log('The value is:', _value )。
这使用了现代的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">
Stack Overflow用户
发布于 2020-05-01 21:27:37
我想我会为这些答案添加一个更短的香草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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25616625
复制相关文章
相似问题