在HTML中的Datalist中查找所选项目

Question

我有一个像这样的数据主义者

<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向datalist添加"option".现在的问题是如何找到用户在datalist中选择/点击的选项.我想在用户选择/点击选项后立即获取选项的ID？

Answer 1

您可以在输入字段中添加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>

Answer 2

您可以使用 is(':selected') 检查

$('#browsers option').each(function() {
    if($(this).is(':selected')){
     // Your code here with the selected value
   }
});

或者获取所选选项值

 $('#browsers').val();