Question

我想创建一个触发更改的事件，因此我可以创建类似<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());
});

Answer 1

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

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

Answer 2

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

$('#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

如何在html datalist上调用select事件

2 个答案: