如何仅显示数据列表 HTML5 中的文本而不显示值?

问题描述

这是一个例子:

<datalist id="浏览器"><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></数据列表>

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

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

这个自动完成功能是必要的，否则我会选择普通的下拉菜单.

解决方案

编辑、更新

跟随摄政

尝试 (v3)

html

<datalist id="浏览器"><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></数据列表><input id="submit" type="submit">

js

$(document).ready(function() {无功数据 = {};$("#browsers 选项").each(function(i,el) {数据[$(el).data("value")] = $(el).val();});//`data` : `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/>

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/

What I want to achieve is when I click on the input element the value would not be displayed, but ONLY the text (i.e. 1, 2, 3, 4, 5). I.e. the value should be hidden like it is with a general dropdown (<select> element).

This autocomplete feature is necessary, else I would have gone with the normal dropdown.

解决方案

Edit, updated

Following Regent

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

这篇关于如何仅显示数据列表 HTML5 中的文本而不显示值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！