如何仅显示数据列表HTML5中的文本而不显示值? [英] How to display only the text in datalist HTML5 and not the value?

问题描述

这里是一个例子:

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

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

此自动完成功能是必需的，否则我将无法使用正常的下拉菜单.

解决方案

修改，更新

摄政王之后

尝试(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/

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中的文本而不显示值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！