web-dev-qa-db-ja.com

入力リスト選択変更イベント

私はこの例を持っています：

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

ユーザーがオプション（マウスまたはキーボードを使用）を選択したときに、イベントをキャッチする必要があります。

onchange="MySuperFunction();"を実行しようとしましたが、これはアイテムが選択され、リストにフォーカスがない場合にのみ機能します。

htmllisteventsinputhtml-datalist
10
swamprunner7

inputイベントは、必要なものに対して機能するはずです。私が理解しているように、データリストを直接使用することはできませんが、データリストはlist属性によって入力に接続されています。このイベントバインディングは、その入力で行われます。

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

http://jsfiddle.net/vccfv/

17
Explosion Pills

JQueryスタイルを使用して「ExplosionPills」ソリューションと同じ効果を得るには：

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

UsinjQuery使用できます.changehttp://jquery.com/

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

または

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