Javascript 在 HTML 中的 Datalist 中查找所选项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26103285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find selected item in Datalist in HTML
提问by Sid M
I've a datalist something like this
我有一个类似这样的数据列表
<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>
I'm adding "option" using jquery to datalist. Now the question is how can i find which option is selected/clicked by the user in datalist. I want to get the id of option as soon as it is is selected/clicked by user?
我正在使用 jquery 向数据列表添加“选项”。现在的问题是如何找到用户在数据列表中选择/单击了哪个选项。我想在用户选择/单击选项后立即获取选项的 id？
回答by ?????
You can add an ID to the input field - and listen for the input event. Then you have to get the value of the input to use in the selector to get the selected option
您可以向输入字段添加 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>回答by Gugun Inter
Try this, I got the 'data-id' value.
试试这个，我得到了 '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
回答by Ragnar
Try this way
试试这个方法
<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'));
});
});
回答by Bojan Petkovski
You can check that with is(':selected')
您可以使用 is(':selected') 检查
$('#browsers option').each(function() {
if($(this).is(':selected')){
// Your code here with the selected value
}
});
Or to get the selected option value
或获取选定的选项值
$('#browsers').val();
