プルダウンのコントロールに関して

2010/08/19 16:22

このQ&Aのポイント

プルダウンのコントロールに関する質問です。プルダウン選択で特定の値が選択された場合にテキスト入力欄を表示させる仕組みを作成しましたが、前回の選択値が同じでもテキスト入力欄を表示させる方法は可能でしょうか？
質問内容は、プルダウンのコントロールに関してのものです。現在、特定の選択肢が選択された場合にテキスト入力欄を表示する仕組みが作成されていますが、前回の選択値が同じでもテキスト入力欄を表示させる方法はありますか？
プルダウンのコントロールに関して質問があります。特定の選択肢が選ばれた場合にテキスト入力欄を表示する機能を作成しましたが、前回の選択値が同じでもテキスト入力欄を表示させる方法は可能でしょうか？

プルダウンのコントロールに関して

プルダウンのコントロールに関して教えて下さい。今、以下のようなソースを記述し、プルダウン選択で"休み"が選択された場合のみ。テキスト入力欄を表示させるような仕組みを作成しました。但し、この場合、Cookie等を使ってデフォルトで前回値を"休み"と選択した場合は他のものを選択し、さらにもう１度"休み"を選択しないと表示されないかと思われます。上記のように前回値で立ち上げた際に、既に"休み"が選択された場合でも、切り替えを行う事なくテキスト入力欄を表示させるような事は可能なのでしょうか？？？わかりにくい内容で申し訳ありません。よろしくお願いします。 <script type="text/javascript"> function ChangeSelection(form, selection) { var text_note = form.elements["text_note"]; if (selection.value=="休み" || selection.value=="出張") { text_note.style.display = "block"; }else{ text_note.style.display = "none"; } } </script> </head> <body> <FORM NAME="fm_a" ACTION="koudou_update2.php" METHOD="POST"> <TD NOWRAP SIZE="30"><input name="text_note" style="width:100%;display:none;" VALUE="$out_goto"></input></TD> <TD><select name="am_note" ONCHANGE="ChangeSelection(this.form, this)" style="width:145px;"> <option value=""></option> <option value="自席" style="background-color:#FFFFFF; color:#3366FF" $sqlline1>自席</option> <option value="離席" style="background-color:#3366FF; color:#FFFFFF" $sqlline2>離席</option> <option value="帰宅" style="background-color:#FFFFFF; color:#3366FF" $sqlline3>帰宅</option> <option value="午前休暇" style="background-color:#3366FF; color:#FFFFFF" $sqlline4>午前休暇</option> <option value="午後休暇" style="background-color:#FFFFFF; color:#3366FF" $sqlline5>午後休暇</option> <option value="休み" style="background-color:#3366FF; color:#FFFFFF" $sqlline5>休み</option> <option value="出張" style="background-color:#3366FF; color:#FFFFFF" $sqlline13>出張</option> </select></TD> </FORM> </body> </html>

yurix_1
お礼率38% (44/114)

JavaScript
回答数5
ありがとう数1

みんなの回答 （5）
専門家の回答

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

ベストアンサー

zeff
ベストアンサー率69% (137/198)

2010/08/21 15:37 回答No.5

試しに作ってみましたが、他の人が書いたスクリプトを参考にしているので、どういう仕組みになっているのか解らない部分多しです。 <script type="text/javascript" defer="defer"> //@cc_on window./*@if(@_jscript_version<=5.8) attachEvent('on'+ @else @*/ addEventListener(/*@end @*/ 'load',function(){ init(); //選択したらCookieを書き込む document.getElementById("fm_a")./*@if(@_jscript_version<=5.8) attachEvent('on'+ @else @*/ addEventListener(/*@end @*/ 'change', function( evt ){ var t = evt. /*@if(@_jscript_version<=5.8) srcElement @else @*/ target /*@end @*/; if( t.nodeName == "SELECT" && t.name == "am_note" ){ ChangeSelection(t); writeCookie( "am_note", t.selectedIndex ); } }, false ); }, false ); function init() { var f = document.getElementById("fm_a"); var t = f.elements["am_note"]; t.selectedIndex = getCookie("am_note"); ChangeSelection(t); } function getCookie( cname ) { var re = new RegExp( decodeURIComponent( cname ) + '=(.*?)(?:;|\s*$)' ) var v = document.cookie.match( re ); return v ? decodeURIComponent(v[1]) : ''; } function writeCookie( cname, cval ){ //クッキーをセット（期限は１年後） var date = new Date(new Date().setFullYear(new Date().getFullYear() + 1)); setCookie( cname, cval, date ); return false; } function setCookie(n, v, e, p, d, s) { var c = [encodeURIComponent(n) + '=' + encodeURIComponent(v)]; if(e) c.push('expires=' + e); if(p) c.push('path=' + encodeURI(p)); if(d) c.push('domain=' + encodeURI(d)); if(s) c.push('secure'); document.cookie = c.join('; '); } function ChangeSelection(t) { var text_note = t.form.elements["text_note"]; if ( t.value == "休み" || t.value == "出張" ) { text_note.style.display = "block"; }else{ text_note.style.display = "none"; } } </script> </head> <body> <form name="fm_a" id="fm_a" action="koudou_update2.php" method="POST"> <td nowrap size="30"><input name="text_note" style="width:100%;display:none;" value="$out_goto"></td> <td><select name="am_note" style="width:145px;"> ※文字数制限につき以下省略。

質問者

補足 2010/08/25 09:56

遅くなりまして申し訳ありません。　　この記述を参考にさせて頂いたところ、思うような事が実現できました！　ありがとうございました！！

その他の回答 (4)

zeff
ベストアンサー率69% (137/198)

2010/08/20 10:01 回答No.4

#2です。「条件付コンパイル」というやつで、ブラウザがIEのVer.8以下であればattachEventに、（IE9からはaddEventListener対応するらしい）それ以外であればaddEventListenerに ChangeSelection関数をonload時に登録しています。 window.onload=ChangeSelection; あるいは、 window.onload=function(){ ChangeSelection(); } という書き方だったら、もしかしたらご存知でしょうか。 ※関数名が違うならそこだけ書き換えれば大丈夫です。

fujillin
ベストアンサー率61% (1594/2576)

2010/08/19 17:29 回答No.3

＞但し、この場合、Cookie等を使ってデフォルトで前回値を"休み"と選択＞した場合は他のものを選択し、さらにもう１度"休み"を選択しないと＞表示されないかと思われます。 cookieを使うのであれば、前回の内容を読み出して事前に表示/非表示をセットしてあげればそのようなことをしなくてもすみます。 phpを使用されているようなので、php側から最初の出力の際にセットしてしまうのが簡単かと… javascriptは、あくまでユーザ側の操作に対応する部分だけ（現状のまま）でもよろしいかと。もちろん、javascriptでロード時にcookieを読んでその内容によって初期状態をセットすることも可能ですが… でも、どうもテキスト欄の記入内容（$out_goto）はサーバ側に保存されている（？）みたいなので、前回のセット状態をわざわざcookieに分けて保存しなくても、サーバー側に併せて保管しておけば、cookie読み込みのための通信時間も節約できそうな気がしますが？ selectの選択のセットはどこでやっているのでしょうか？もしかして、各オプションの$sqlline1がselected/nullになっているとか？もしそうであれば、なおのことphp側でセットしてあげるべきでしょう。全体像が把握できていないので、まとはずれな回答になっているかも？＜参考＞サーバーからのcookie処理 http://jp.php.net/manual/ja/features.cookies.php javascriptでのcookie処理 http://www.sasaraan.net/program/js/jscookie.html ただし、web上のクッキー処理情報は古いものが多いので参考にしない方が良いかも。いっそのことライブラリを使っちゃうとか？ http://www.softel.co.jp/blogs/tech/archives/1135

質問者

補足 2010/08/19 17:38

ご回答ありがとうございます。知識不足で申し訳ありません。 >cookieを使うのであれば、前回の内容を読み出して事前に表示/非表示をセットしてあげれば >そのようなことをしなくてもすみます。上記内容にチャレンジしようと考えていますが、Cookieの値によって表示/非表示をコントロールするにはどのような記述をすれば良いでしょうか。。。教えて頂けれ幸いです。よろしくお願いします。

zeff
ベストアンサー率69% (137/198)

2010/08/19 17:12 回答No.2

onloadでも呼び出せばOKじゃないかと。 <script type="text/javascript">  </script>

質問者