如何在datalist html5中显示文本，而不是值 [英] How to display the text in datalist html5 and not value
问题描述
<!DOCTYPE html>
<html>
<body>
<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>
<input type="submit">
</form>
</body>
</html>
http： //jsfiddle.net/j7ehtqjd/1/
我附上了一个小提琴。请检查。
我想要实现的解决方案是当我点击显示的值的下拉列表，但是我想要显示文本1,2,3,4,5。我必须对我的实际问题使用一个json响应。只应该显示文本，并且应该像普通下拉列表那样隐藏该值。
I have attached a fiddle. Please check. The solution i want to achieve is when i click the dropdown the value is displayed, but i want the text 1,2,3,4,5 to be displayed. I have to use a json response for my actual problem.Only the text should be displayed and the value should be hidden like a general dropdown. This autocomplete feature is necessary else i would have gone with the normal dropdown.
推荐答案
编辑，更新
以下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'));
});
});
jsfiddle http://jsfiddle.net/guest271314/j7ehtqjd/13/
jsfiddle http://jsfiddle.net/guest271314/j7ehtqjd/13/
这篇关于如何在datalist html5中显示文本，而不是值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
