javascript - 如何获取数据列表的更改事件？

Question

我正在使用数据列表，需要检测用户何时从下拉列表中选择了某些内容。 A similar question has been asked但我需要它，以便仅当用户从数据列表中选择某些内容时才会触发事件。如果他们在输入中键入内容，那么我不希望事件触发。 (请注意，在我链接的问题的已接受答案中，它们绑定(bind)了输入，这不是我想要的)。我试过了(没有成功):

<datalist>
    <option>Option 1 Here</option> 
    <option>Option 2 Here</option>
</datalist>


$(document).on('change', 'datalist', function(){
   alert('hi');
});

编辑: 这个问题与建议的问题不同，因为它是一个完全不同的问题。

Answer 1

您可以在更改时手动检查它。但是你需要检查datalist输入的变化。

FIDDLE

$(document).on('change', 'input', function() {
  var options = $('datalist')[0].options;
  var val = $(this).val();
  for (var i = 0; i < options.length; i++) {
    if (options[i].value === val) {
      console.log(val);
      break;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input list="ff">
<datalist id="ff">
  <option>Option 1 Here</option>
  <option>Option 2 Here</option>
</datalist>