如何调用更改事件，例如在 HTML 数据列表上选择

how to call change event like select on html datalist

本文关键字：HTML 数据 选择 列表 事件 何调用 调用      更新时间：2023-09-26

我想创建一个在更改时触发的事件，这样我就可以创建类似<select>标签的东西，但我的代码不适用于<datalist>。

这是我的 HTML：

<input type="text" name="team" id="favorite_team" list="team_list">
<datalist id="team_list">
  <option>Detroit Lions</option>
  <option>Detroit Pistons</option>
  <option>Detroit Red Wings</option>
  <option>Detroit Tigers</option>
</datalist>

这是我的JQuery代码：

$('#favorite_team').on('change', function(){    
      alert($(this).val());
});

您的选择器错误，请将输入的 id 更改为 favorite 或尝试以下代码：

$('#favorite_team').on('input', function(){    
      alert($(this).val());
});

您可以添加循环来判断列表中的选项。

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

JSFiddle

相关文章：