web-dev-qa-db-ja.com

同じオプションが再選択された場合でも、選択の変更イベントを実行します

基本的に、私は次のようなドロップダウンメニューを持っています：

<select>
  <option>0</option>
  <option selected="selected">1</option>
  <option>2</option>
  <option>3</option>
</select>

同じオプションを選択しても起動する関数を書き込もうとしています。つまり、ドロップダウンを開いて選択したオプションを再度選択しても、関数を実行してほしいのです。

javascriptjqueryhtmlonchange
20
Spencer

マウスで選択する場合は、mouseupを使用できます。ただし、選択ボックスが開かれているときにも起動するため、起動された回数を追跡する必要があります（偶数：選択が開かれている、奇数：選択が閉じられている）： http://jsfiddle.net/T4yUm/2/ 。

$("select").mouseup(function() {
    var open = $(this).data("isopen");

    if(open) {
        alert(1);
    }

    $(this).data("isopen", !open);
});
14
pimvdb

pimvdbの答えは私にとって大きな助けになりましたが、キーボードのアクティブ化と選択から離れたナビゲーションに対処するために、いくつかのビットを追加しました。

$('select').mouseup(... as in pimvdb... )
  .blur(function() {
     $(this).data('isopen', false);
  }).keyup(function(ev) {
     if (ev.keyCode == 13)
        alert(1);
  });

ぼかしハンドラーは、ドロップダウンが開いているときに選択範囲から離れる方向に移動する処理を行い、キーアップハンドラーは、キーボードで選択範囲の値を変更するときに処理します。その場合の動作は、ユーザーが[戻る]をクリックして移動したときにのみ、最終的に値を選択したと見なされるというものです。キーボードで別の動作が必要な場合は、難しいことではありません。

4
James Ellis-Jones

selectは、このように使用することを意図したものではありません。selectでのマウスとキーボードのイベントの追跡など、ほとんどの場合、この種の動作を取得するために使用できるハックがありますが、ありません。彼らが機能し続けること、またはすべてのプラットフォームで機能することを保証します。

私はどちらかを提案します…

  1. 変更時にselectをデフォルト値にリセットし、他のテキストを使用してどちらが「選択」されているかを示す、または
  2. select以外のコントロールを使用します。

最終目標についてもう少し詳しく説明していただけますか？

2
s4y

別の方法として、.blur()イベントを使用します--- http://jsfiddle.net/VKZb2/4/

Pro

これはどちらの方法でも発砲します。

Con

コントロールがフォーカスを失ったときにのみ起動します。

1
John Strickler

私は同じ問題に遭遇しました。オプションタグにクリックイベントを追加し、selectの値を変更しました。

$("#select option").mouseup(function() {
    $(this).parent().val($(this).attr("value"));
    // do something.
});

注：これはiPhoneまたはiPadデバイスでは機能しません。

0
Rico