- ベストアンサー
ｊQueryを利用したフォームについて
jQueryを利用したフォームに http://kachibito.net/web-design/ideal-forms.html 以下を組み込みたいと思います。 セレクトボックス変更時に内容を切り替える。 http://javascript.maxux.com/js033.htm うまく組み込めず困っています。 どうかお教えください。
- yellowsnows
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ちゃんと見てはいませんが、 Ideal Formsを使用した後のDOMを確かめてみればわかると思いますが、もともとのフォーム内の要素は見えないようにして（画面外において）表示用に別の要素を生成しているようです。 配布元のトップページのサンプルを例にすれば、のセレクト要素はdivとulからなる表示用の要素に置き換えられているようです。 もちろん、表示用の要素で選択しても元のselect要素に反映される仕組みにはなっているようですが、スクリプトからの操作なので2番目にご提示のスクリプトで使用しているonchangeイベントが発生しないようです。 Ideal Formsの内容を見てイベント発生時の処理に後者の処理も併せて行なえるように追記するか、それは面倒だというのであれば、対象とするセレクトボックスを定期的に監視して変化したら必要な処理を実行するようにしてあげるとか。 後者であれば、Ideal Formsとは無関係に行なえますので比較的簡単かも知れません。（必ずしも効率的とは言い難いですが） 以下、監視のサンプルです。 ブラウザによってイベントのタイミングが若干違う様なので、わかりにくい場合があるかも知れませんが、直接の操作とボタンクリック（スクリプトによる値変更）とで、取得のされ方が異なるのがわかるかと思います。 (全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <div> <select name="hoge" onchange="fuga()"> <option value="1">test1</option> <option value="2">test2</option> <option value="3">test3</option> </select> </div> <hr> <div> <button type="button" onclick="next()"> クリックでセレクト内容がかわります。 </button> </div> <hr> <div id="alert"></div> <script type="text/javascript"> <!-- function next(){ var s = document.getElementsByTagName("select")[0]; var i = (s.selectedIndex+1) % s.options.length; s.options[i].selected = true; } function fuga(){ document.getElementById("alert").innerHTML = "cached by onchange event"; } function timer(){ var s = document.getElementsByTagName("select")[0].selectedIndex; var v = (this.value===undefined)?s:this.value; if(v!=s) document.getElementById("alert").innerHTML = "cached by timer function index=" + s; this.value = s; } var id = setInterval(function(){timer.call(timer);}, 500); //--> </script> </body> </html>
お礼
fujillin様 2通りの方法をお教えいただきありがとうございました。 監視のサンプル非常に役に立ちました。 組み込みましたところ、希望通りの動作を確認できました。 本当にありがとうございます！