输入列表选择更改事件

时间:2013-02-28 23:31:57

标签: html5 list events input html-datalist

我有这个例子:

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

当用户选择选项(使用鼠标或键盘)时,我需要捕捉一个事件。

我试着做onchange =“MySuperFunction();”但这仅适用于选择某个项目,然后列表未聚焦的情况。

3 个答案:

答案 0 :(得分:17)

input事件应该适用于您需要的内容。据我了解,您不能直接使用数据列表,但它通过list属性连接到输入。此事件绑定将继续输入:

document.getElementById('browsers-input').addEventListener('input', function () {
   console.log('changed'); 
});

http://jsfiddle.net/vccfv/

答案 1 :(得分:2)

获得&#34;爆炸丸&#34;的相同效果使用JQuery样式的解决方案:

$("#browsers-input").on("input", MySuperFunction);

答案 2 :(得分:1)

使用jQuery你可以使用.change http://jquery.com/

$('datalist#browsers').change(MySuperFunction);

$('datalist#browsers').change(function(){
  // stuff
});