我正在使用一个<input type='text'>
元素与一个<datalist>
为表单提供用户名建议。一切都按预期进行,我的所有用户都出现了。
但是,当用户提交表单时,我想根据输入在数据存储中选择正确的用户。不幸的是,名称并不唯一,并且有可能出现重复。为了避免这种情况,我的所有用户都有一个唯一的 ID,该 ID 也是<datalist>
's <options>
tags.
除了输入的文本值之外,有什么方法可以读取其他内容吗?是否有对所选数据列表元素的引用?我可以根据文本输入检索用户的 ID 吗?
<input type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" list="user-datalist" required autofocus>
<datalist id="user-datalist">
<option id="53c911ea609252c600632dfe" value="Mr Smith">Mr Smith</option>
<option id="53c911ea60925sdfs4e444eg" value="John Snow">John Snow</option>
<option id="53c911ea6034534535k345th" value="John Snow">John Snow</option>
<option id="53c911ea60925234234234er" value="Mickey Mouse">Mickey Mouse</option>
</datalist>
正如你所说,名字并不独特。所以我在您的数据列表中添加了一个重复的名称。
<input type="text" class="form-control" name="userName" placeholder="Type a user's name" value="" list="user-datalist" required autofocus>
<datalist id="user-datalist">
<option id="53c911ea609252c600632dfe" value="Mr Smith">Mr Smith</option>
<option id="53c911ea60925sdfs4e444eg1" value="John Snow">John Snow</option>
<option id="53c911ea60925sdfs4e444eg2" value="John Snow">John Snow</option>
<option id="53c911ea60925234234234er" value="Mickey Mouse">Mickey Mouse</option>
</datalist>
<input type="button" id="sub" value="sub"/>
并获取名字的id
$('#sub').on('click',function(){
var g=$('input[type="text"]').val();
var id = $('#user-datalist').find('option').filter(function() { return $.trim( $(this).text() ) === g; }).attr('id');
alert(id);
});
DEMO http://jsfiddle.net/Amit12x/TE6dk/2/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)