这是一个例子:
<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/ http://jsfiddle.net/j7ehtqjd/1/
我想要实现的是当我单击输入元素时value不会显示,但仅显示text(即 1、2、3、4、5)。 IE。该值应该是hidden就像一般的下拉菜单一样(<select>
元素)。
这个自动完成功能是必要的,否则我会使用正常的下拉菜单。
编辑、更新
继摄政之后
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'));
});
});
jsfiddlehttp://jsfiddle.net/guest271314/j7ehtqjd/13/ http://jsfiddle.net/guest271314/j7ehtqjd/13/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)