我有一个像这样的数据列表
<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 向数据列表添加“选项”。现在的问题是如何找到用户在数据列表中选择/单击的选项。我想在用户选择/单击选项后立即获取选项的 id？
您可以向输入字段添加 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>试试这个方法
<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'));
});
});
试试这个，我得到了 '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
您可以使用 is(':selected') 检查
$('#browsers option').each(function() {
if($(this).is(':selected')){
// Your code here with the selected value
}
});
或获取选定的选项值
$('#browsers').val();