<!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响应.只应该显示文本,并且应该像普通下拉列表那样隐藏该值.这个自动完成功能是必需的,否则我将会使用正常的下拉菜单.
解决方法
编辑,更新
以下摄政
尝试(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'));
});
});