• ベストアンサー

SELECT要素のjQueryイベントハンドラ

SELECT要素のドロップダウンリストに対して、 選択項目が変わった時のイベントを設定したいと考えています。 jQueryを利用しているのですが、$("#...").change(func) による設定では、 キーボードで項目を変更した時に実行されませんでした。 他はjQuery利用で統一しているので出来るだけjQueryを使いたいのですが、 これはjQueryの仕様的に対応していないのでしょうか？ keydownを拾って別途キーボード操作を処理すれば解決はできますが・・・

  • mokpok
  • お礼率62% (154/245)
回答 全件
ベストアンサー
「キーボードで項目を変更した時」 ってそもそも選んだだけでは変更されて…

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

「キーボードで項目を変更した時」 ってそもそも選んだだけでは変更されてないから、onchangeイベントは発火してませんよね。 エンターキーとかタブキーおせば発火しますけど。 　でもそれは、jQueryの$.change()だけのことじゃなくて、素のjavascriptでも、onchange属性でもおんなじだと思うんですけど．．． ゆえに、jQueryで書きたいんなら、jQueryでkeydownイベントを拾うコードを書けばよろしいんではないですか

mokpok
質問者

お礼

回答ありがとうございます。 IE8でしか確認していませんが、onchangeイベントはキーで選んだだけで発火しています。 IEの独自仕様？ ともあれ、元々のJavaScriptの仕様として、 Enterキーを押すなり、フォーカスが外れるなりしないと、 変更されたとは見なさないということでしょうか。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jqueryでselect要素を表示・非表示する方

    下記のように、select要素を2つ用意し、果物か魚を撰択すると、それに応じた2番目のselect要素が表示されるようなコードを作りました。 見た目の問題はないのですが、1つ目で魚を撰択し、あじやさんまを撰択しても、最終的にフォームが送信される時には 果物のvalueが参照されてしまいます。 jqueryのhiddenで隠しているだけなので、果物用のselect要素が裏に潜んでいるためにこういった結果になっているかと思うのですが この問題を解決するためにはどうしたらよいのでしょうか。 <form id="test"> <select id="type"> <option value="fruit">果物</option> <option value="fish">魚</option> </select> <select name="sample" id="fruit"> <option value="apple">りんご</option> <option value="orange">おれんじ</option> </select> <select name="sample" id="fish"> <option value="aji">あじ</option> <option value="sanma">さんま</option> </select> <input type="submit" > </form> // はじめは全て隠しておく $('#fruit').hide(); $('#fish').hide(); $('#type').change(function(){ var type = $(this).val(); if (type == 'fruit') { $('#fruit').show(); $('#fish').hide(); } else { $('#fruit').hide(); $('#fish').show(); } }); $('form').submit(function(){ var result = $('form [name=sample]').val(); alert(result); return false; });

  • jqueryを利用してインラインフレームに画像をドラッグ&ドロップした

    jqueryを利用してインラインフレームに画像をドラッグ&ドロップしたい jqueryを使って、画像をドラッグしたり、それを自分で設定したエリアにドロップすることはできました そこで、インラインフレームを使って表示している外部プログラムにドロップエリアを作成し、親フレームからインラインフレームに画像をドラッグ&ドロップして要素を渡したいと思ったのですがやり方が分かりません よろしくお願いします

  • selectのchangeイベントの回数

    IE8を使用しています。jqueryで、以下のようなソースを書いています。 #alistは、selectタグにつけているIDです。selectの項目を変化させたときに、 一度だけyyy.phpを実行させたいのですが、changeイベントが２回起きてしまいます（"a"のalertが２回出る。） なぜでしょうか？一度だけイベントを取得する方法を教えていただけないでしょうか？ ソースコード： $(function() { alert("a"); $('#alist').change( function() { $.getJSON("php/yyy.php", XXX, function(data) { }); 以下、かっこを閉じる。

  • jQueryプラグインでfn指定しないのはどんな時

    ■質問1 ・jQueryプラグイン内で、jQuery.fn.hoge = function() {と書くと、jQuery(指定セレクト要素).hogeでメソッド実行できるみたいですが、逆にプラグイン内で、jQuery.hoge = function() { と書くのはどんな時なのでしょうか？ セレクタで呼び出さないとき？ ■質問2 ・「jQuery.fn.extend」「「jQuery.extend」は、上記とはまた別の話なのでしょうか？

  • [jQuery]イベント定義時のコールバック関数に引数を渡したい

    ■以下のHTMLが1～5の５個あるとします。 <select id="test_list1"> <option value="1">あいうえお</option> <option value="2">かきくけこ</option> </select> <div id="test_txt1"></div> ■jqueryで以下のように、セレクトボックスを変更したら、それに紐づくdivタグのテキストを書き換えるとします。 var test = 5; for (i=1; i <= test; i++) { $("#test_list"+ i).change( function() { $("#test_txt"+ i ).text('変更されました。'); }); } change()イベント時は、iの値が正常なんですが、 text()で書き換え時は、iの値が常に5になってしまいます。 text()で書き換え時のiは、イベント定義時のiではないということは分かるのですが、 解決の方法がわかりません。 こんなふうに引数として渡すことはできないのでしょうか？ $("#test_list"+ i).change( function( i ) { $("#test_txt"+ i ).text('変更されました。'); }); ご教示願います。。

  • jQueryでリスト項目の表示・非表示を切りかえる

    jQueryに詳しい方教えてください。 下記のようなHTMLがあって、 jQueryを使って<li>要素の表示／非表示を切り替えたいのです。 ---------------- HTMLスクリプト <ul class="test"> 　<li>項目1</li> 　<li>項目1</li> 　<li>項目1</li> </ul> 切り替えるタイミングはxmlのデータ内にflagを立てています。 flagの値は取得できました。（確認済み） 仕様としては、flagの値が 0の時は→<li>要素の1つ目と2つ目を表示させる。 1の時は→<li>要素の3つ目のみを表示させる。 2の時は→<li>要素のすべてを表示させる。 ということをしたいのです。 ですが、なぜかうまくいきません。 以下のように書きました。 if(flag==0){ 　$(".test li:eq(2)").hide(); }else if(settlementflag==1){ 　$(".test li:eq(0)"), .test li:eq(1)").hide(); }else if(settlementflag==2){ 　//何もしない }; そもそもこうゆう書き方で合っているのしょうか？ jQueryを勉強したてで、恥ずかしいばかりですが、 ご教授のほど宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • jQuery:要素の位置情報の保持について

    jQuery:要素の位置情報の保持について 現在、IE8,jQuery 1.4.1,jQuery UI　1.8.1の環境でWebアプリケーションの作成を行っています。 画像ファイルを（マウスの）ドラッグで移動させ、ドロップした後の位置情報を保持し、再びそのWebアプリケーションを起動させた時に画像ファイルが移動した後の位置のままというようにしたいと考えています。 このようなことは可能でしょうか？ もし可能な場合、何か参考となるコードやキーワードを教えていただけないでしょうか？ 画像ファイルを移動させる事までは確認しましたので載せておきます。 <html> <head> <title>ドラッグで要素移動title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="../Scripts/jquery-ui-1.8.1.custom.css" type="text/css" /> <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="../Scripts/jquery-ui-1.8.1.custom.min.js"></script> <script type="text/javascript" language="JavaScript"><!-- $(function () { $("img.mover").draggable({ opacity: 0.5, cursor: "move", grid: [20, 20], stop: function () { var x = $(this).css("left");//この値をどこかで保持しておきたい var y = $(this).css("top");//この値をどこかで保持しておきたい alert("左：" + x + "、上：" + y ); } }); }); //--></script> </head> <body> <img src="pic1.jpg" class="mover" alt="test" /> <img src="pic2.jpg" class="mover" alt="test" /> <img src="pic3.jpg" class="mover" alt="test" /> </body> </html>

  • ｊQueryを利用したフォームについて

    jQueryを利用したフォームに http://kachibito.net/web-design/ideal-forms.html 以下を組み込みたいと思います。 セレクトボックス変更時に内容を切り替える。 http://javascript.maxux.com/js033.htm うまく組み込めず困っています。 どうかお教えください。

  • イベント登録とメモリリークについて(jQuery)

    下記のような【html】をjQueryのAjax関数とhtml()を利用した【処理フロー】で、動的にDOMに追加しているのですが、以下の【質問】にお答え頂けないでしょうか。 【html】 <div> (省略) <a href="javascript:void(0);" onclick="foo({'arg1':'str1','arg2':'str2','arg3':num3…});">テスト</a> (省略) </div> ※foo関数の引数は初期化配列を指定、引数値はサーバサイドで動的に変化させてクライアントに出力 【処理フロー】 a要素クリック→foo関数実行→jQueryのAjax関数でfoo関数引数の配列値をサーバに送信→レスポンスとして新たな【html】を受信して、jQueryのempty()、html()を使用して同じ要素配下を置き換え ※$.ajax({..., data:配列オブジェクト, ...}); のように、dataプロパティにfoo関数の引数をそのまま渡しています 【質問】 1.上記のonclickの内容が原因かどうかは分かっていませんが、繰り返しフローを走らせると、各ブラウザ(IE8,FireFox3.6,safari5,Opera11)でメモリリークが発生します。上記のonclickの関数に初期化配列という定義に問題はあるでしょうか。 2.foo関数の引数にある配列は、要素がクリックされたタイミングでオブジェクト化される認識であっていますでしょうか。また、上記のフローだと開放される(参照されなくなる)タイミングは、Ajax通信完了後という認識であっていますでしょうか。 3.Webで調査した範囲では、jQueryのempty()、html()はどちらも削除／置き換え前の要素に紐づいたイベントは削除されるようなのですが、上記のようにhtml()で追加する要素にonclickイベントを定義している場合も、次回empty()、html()で置き換え時にイベント削除されるでしょうか。 4.1に関連しますが、上記の内容、処理フローにおいて、置き換え前の要素セットやfoo関数の引数がメモリリークを引き起こす可能性はあるでしょうか。 どうぞよろしくお願いいたします。

  • jqueryのアコーディオンメニューについて

    jqueryのアコーディオンメニューを利用してるのですが、項目を３つから ２つに減らすためliタグを削除したのですが、その部分が空欄となり、 思うようにいきません。３つあって２つが繰り上がり下がブランクのメニューがあります。 elemnt.styleという箇所でheightが６７ピクセルに設定されているようですが、 発見できず、困っております。 もしよろしければ教えて頂けると助かります。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する