在HTML中的Datalist中查找所选项目
在HTML中的Datalist中查找所选项目
提问于 2014-09-29 23:20:15
我有一个类似下面这样的数据列表
<input list="browsers">
<datalist id="browsers">
<option id="op1" value="Internet Explorer">
<option id="op2" value="Firefox">
<option id="op3" value="Chrome">
<option id="op4" value="Opera">
<option id="op5" value="Safari">
</datalist>我使用jquery将"option“添加到datalist中。现在的问题是，我如何才能找到用户在datalist中选择/单击的选项。我想在用户选择/点击后立即获取选项的id？
回答 4
Stack Overflow用户
发布于 2014-09-29 23:44:24
您可以向输入字段添加ID -并侦听输入事件。然后，您必须获取要在选择器中使用的输入值，以获取所选选项
$(function() {
$('#browserinput').on('input',function() {
var opt = $('option[value="'+$(this).val()+'"]');
alert(opt.length ? opt.attr('id') : 'NO OPTION');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id='browserinput' list="browsers">
<datalist id="browsers">
<option id="op1" value="Internet Explorer" />
<option id="op2" value="Firefox" />
<option id="op3" value="Chrome" />
<option id="op4" value="Opera" />
<option id="op5" value="Safari" />
</datalist>
Stack Overflow用户
发布于 2014-09-29 23:27:24
试试这条路
<input list="browsers" id="input">
<datalist id="browsers">
<option id="op1" value="Internet Explorer">
<option id="op2" value="Firefox">
<option id="op3" value="Chrome">
<option id="op4" value="Opera">
<option id="op5" value="Safari">
</datalist>
$(function(){
$('#input').change(function(){
console.log($("#browsers option[value='" + $('#input').val() + "']").attr('id'));
});
});http://jsfiddle.net/smap06ro/45/
Stack Overflow用户
发布于 2015-11-30 15:09:01
试试这个，我得到了'data-id‘值。
<input list="browsers" id="input">
<datalist id="browsers">
<option data-id="op1" value="Internet Explorer">
<option data-id="op2" value="Firefox">
<option data-id="op3" value="Chrome">
<option data-id="op4" value="Opera">
<option data-id="op5" value="Safari">
</datalist>
<script type="text/javascript">
$(function(){
$('#input').change(function(){
var abc = $("#browsers option[value='" + $('#input').val() + "']").attr('data-id');
alert(abc);
});
});
</script>
//if you click/choose 'Firefox' then 'op2' will show页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26103285
复制相关文章
相似问题
腾讯云开发者
