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

2023/08/10 07:17

このQ&Aのポイント

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

ベストアンサー

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

2010/08/19 16:22

プルダウンのコントロールに関して教えて下さい。今、以下のようなソースを記述し、プルダウン選択で"休み"が選択された場合のみ。テキスト入力欄を表示させるような仕組みを作成しました。但し、この場合、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>

質問者

補足 2010/08/19 17:35

ご回答ありがとうございます。知識不足でお恥ずかしいのですが、onload を使用する事に関しては理解できましたが、その下の記述に関してはさっぱり。。。この記述をそのままソースに追加すれば良いのでしょうか。。。教えて頂ければ幸いです。よろしくお願いします。

nda23
ベストアンサー率54% (777/1415)

2010/08/19 17:05 回答No.1

BodyのOnLoadで同様の手続きを呼び出すようにしてみたら如何でしょう。

関連するQ&A

テキストのデフォルト非表示に関して
テキストのデフォルト非表示に関して以下のように、プルダウンの選択によってテキストの表示、非表示をjavascriptを使ってコントロールしようとしていまいすが、そもそもデフォルトでテキストを非表示にしたい場合はどのように記述すれば良いでしょうか。。。初歩的な質問で申し訳ありません。よろしくお願いします。《内容》 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function ChangeSelection(form, selection) { if (selection.value=="休み") { document.getElementById("text_note").style.display = "block"; }else if (selection.value=="出張") { document.getElementById("text_note").style.display = "block"; }else { document.getElementById("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%" 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>
- ベストアンサー
- JavaScript
テキストエリアの入力に関して
テキストエリアの入力に関して教えて下さい。部分的な抜粋で申し訳ありませんが、以下のようにテキストエリアをダブルクリックで時間を表示させるような"javascript"を記述しましたが、その際に、テキストにカーソルを合わせても、そもそもの入力できなくなってしまいました。エリアは表示されるものの、カーソルを合わせても入力モードに変わらない。。《内容》 print("<TR>\n"); print("<TD NOWRAP><FONT SIZE='2.5'><B>【備　　考】</B></FONT></TD>\n"); print("<TD colspan='2'>\n"); print("<div id='target'>\n"); print("<select onchange='test(1)' onblur='test(1)'> <option value='　' style='background-color:#3366FF; color:#FFFFFF'>　 <option value=' ～０９:３０' style='background-color:#FFFFFF; color:#3366FF'>～０９:３０ <option value=' ～１０:００' style='background-color:#3366FF; color:#FFFFFF'>～１０:００ <option value=' ～１０:３０' style='background-color:#FFFFFF; color:#3366FF'>～１０:３０ <option value=' ～１１:００' style='background-color:#3366FF; color:#FFFFFF'>～１１:００ <option value=' ～１１:３０' style='background-color:#FFFFFF; color:#3366FF'>～１１:３０ <option value=' ～１２:００' style='background-color:#3366FF; color:#FFFFFF'>～１２:００ </select>\n"); print("<input size='20' type='text' name='pm_note' id='pm_note' value='$out_time' ondblClick='test(0)' style='width:100%;'>　\n"); print("</div>\n"); print("</TD>\n"); print("<TD></TD>\n"); print("<TD></TD>\n"); print("</TR>\n");
- ベストアンサー
- HTML
プルダウンの初期値に関して２
前の質問と同じ内容となってしまいますが、プルダウンの前回値がどうしても取得できません。。。ソースは以下のように記述し、selected属性を用いて初期値に前回値を指定しているような格好をとっています。何か記述が間違っているのでしょうか。。。。 print("<TR>\n"); print("<TD NOWRAP><FONT SIZE='3'><B>【行　　先】</B></FONT></TD>\n"); print("<TD NOWRAP SIZE='30'><input name='text1' VALUE=$out></input>\n"); print("</TD>\n"); print("<TD><select name='am_note' ONCHANGE='ChangeSelection(this.form, this)'> <option value='　'　　　　　　　　　　　　　　　　　　　　　 <?php if('$out_goto'=='　'){ echo' selected=?'selected?''; } ?> 　 <option value='自席' style='background-color:#FFFFFF; color:#3366FF' <?php if('$out_goto'=='自席'){ echo' selected=?'selected?''; } ?> 自席 </select>\n"); print("</TD>\n"); print("</TR>\n"); 教えて下さい。
- ベストアンサー
- PHP
プルダウンの初期値に関して
教えて下さい。 PHPとJavascript、DBはMySWLを使用してプルダウンにて選択した内容を、別のテキストエリアに表示させるような事をしようとしています。 javascriptで選択されたものを別エリアに表示させ、さらには前回値をテキストエリアに再表示させる事は可能ですが、次に登録しようとした際に、プルダウンを選択していないとせっかく登録した内容がプルダウンの初期値で上書きさせれてしまいます。何か、テキストにデータが存在した場合には、プルダウンの情報で上書きしないか、そもそもプルダウンの内容を覚えておくような事はできないでしょうか。。。現在作成している記述です。 print("<TR>\n"); print("<TD NOWRAP><FONT SIZE='3'><B>【行　　先】</B></FONT></TD>\n"); print("<TD NOWRAP SIZE='30'><input name='text1' VALUE=$out></input>\n"); print("</TD>\n"); print("<TD><select name='am_note' ONCHANGE='ChangeSelection(this.form, this)'> <option value='　'>　　　　　　　　　　　　　　　　　　　　　 <option value='自席' style='background-color:#FFFFFF; color:#3366FF'>自席 </select>\n"); print("</TD>\n"); print("</TR>\n"); よろしくお願いします。
- ベストアンサー
- PHP
プルダウン選択後の手入力優先に関して
教えて下さい。プルダウンを選択し、選ばれたものを別テキストに表示するような事をしたいと考えています。現在、下記のように記述をしており、上記の内容は実現できていますが、その際に、表示される側のエリアに手入力を可とし、入力があった場合は、 javasriptの選択項目を無効（手入力を優先）としたいと考えています。どのような方法があるでしょうか。。。 <SCRIPT LANGUAGE="JavaScript"> function ChangeSelection(form, selection) { v = selection.value; form.text_note.value = v; } </SCRIPT> print("<TD NOWRAP><FONT SIZE='3'><B>【行　　先】</B></FONT></TD>\n"); print("<TD NOWRAP SIZE='30'><input name='text_note' VALUE=$out_goto></input>\n");　//$out_gotoにはphpにてテーブルから読み込まれた情報が初期値として格納されています。 print("</TD>\n"); print("<TD><select name='am_note' ONCHANGE='ChangeSelection(this.form, this)'>\n"); print("<option value='　'></option>\n"); print("<option value='自席' >自席</option>\n"); print("<option value='離席' >離席</option>\n"); print("</select>\n"); print("</TD>\n"); よろしくお願いします。
- ベストアンサー
- JavaScript
プルダウンリストの背景色の指定
お世話になります。現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。 <select> <option style="background-color: #FF0000;">サンプル1</option> <option style="background-color: #00FF00;">サンプル2</option> <option style="background-color: #0000FF;">サンプル3</option> <option style="background-color: #FFFFFF;">サンプル4</option> </select> このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され、背景色が#0000FFになるようにしたいのですが、上記のままだと、IEでは背景色も変化しますが、firefoxですとプルダウンリスト内に「サンプル3」と表示されても背景色は白のままです。 IEとおなじ動きになるようにするには、どうしたらよいでしょうか。ちなみに、 <select style="background-color: #FF0000"> にすると、IE、firefoxともにプルダウンリストの背景色が変更できたので、javascriptでoptionのvalueをとり、それをselectのstyleに設定できれば。。。と考えたのですが、javascriptはほぼ無知なので、上記の方法でも解決できずでした。簡単に解決できる方法などございますでしょうか。もしくは、javascriptで解決できますでしょうか。どうぞ宜しくお願いいたします。
- ベストアンサー
- HTML
プルダウン　背景色の変更
お世話になっております。以前こちらで質問させていただき、またつまずいたので質問させてください。何度も申し訳ございません。現在、 <script type="text/javascript">  </script> ------------------------------------------------------------ html部分 <select id="key" name="key" onChange="chBackGround(this)"> <option style="background-color: #FF0000;">サンプル0</option> <option style="background-color: #00FF00;">サンプル1</option> <option style="background-color: #0000FF;">サンプル2</option> <option style="background-color: #FFFFFF;">サンプル3</option> </select> としており、プルダウンで選ばれたカラーのスタイルを<select>タグに埋め込んでおります。上記だと、この画面を初期表示時、<select>部分に読み込まれるプルダウンの色が、必ずbc[0]（サンプル0の色）になります。例えば、サンプル2のoptionにselectedが記載されていた場合、画面の初期表示はbc[2]（サンプル2の色）にしたいのですが、この方法をご教授いただけませんでしょうか。お忙しいところ申し訳ございません。どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
プルダウン選択によるボタンの表示／非表示に関して
教えて下さい。下のように、ONCHANGEイベントで、プルダウンにて選択された内容を、別のテキスト（'text'）エリアに表示させる記述をしましたが、今度は選択された内容によって、ボタンの表示／非表示をコントロールしたいと考えています。実際には、下の記述で、'BBB'が選択された場合のみ、***よりしたの"日"ボタンを表示させたいと考えています。どのように記述すれば良いでしょうか。。。教えて頂きたいと思います。 <SCRIPT LANGUAGE="JavaScript"> function ChangeSelection(form, selection,num) { v = selection.value; form.text.value = v; } <FORM NAME="fm_a" print("<TD><input name='text'></input>\n"); print("</TD>\n"); print("<TD><select name='am_note' ONCHANGE='ChangeSelection(this.form, this)'>\n"); print("<option value=''></option>\n"); print("<option value='AAA'>AAA</option>\n"); print("<option value='BBB'>BBB</option>\n"); print("<option value='CCC'>CCC</option>\n"); print("</select>\n"); print("</TD>\n"); ************************************************************** print("<TD>\n"); print("<input name='Cal' type='button' value='日'\n"); print("</TD>\n");
- ベストアンサー
- JavaScript
プルダウンで選択したCGIを動かしたい（ACTION=""をプルダウンで変更するには？）
プルダウンで選択したCGIを動かしたい（ACTION=""をプルダウンで変更するには？）以下の <option value="test1.cgi">テスト１　 <option value="test2.cgi">テスト２ <option value="test3.cgi">テスト３ <option value="test4.cgi">テスト４４つのプルダウンメニューを選択して、それぞれ別のCGIを動かすにはどうしたらできますか？よかったら教えて下さい。javascriptで出来そうな気がするのですが… <FORM name="testname" method="post" ACTION="/cgi-bin/??????" > <TABLE> <TR><TD>　テスト</TD> <TD bgcolor="#FFFFFF"> <SELECT name=""> <option value=""> <option value="test1.cgi">テスト１　 <option value="test2.cgi">テスト２ <option value="test3.cgi">テスト３ <option value="test4.cgi">テスト４ </SELECT></TD> </TR> <TR> <TD bgcolor="#cccccc" width="150">　開始日</TD> <TD bgcolor="#FFFFFF"> <input name="daysS" type="text" size="8"> </TD> </TR> <TR> <TD bgcolor="#cccccc" width="150">　終了日</TD> <TD bgcolor="#FFFFFF"> <input name="daysE" type="text" size="8"> </TD> </TR> </TABLE> <BR> <INPUT type="submit"name="send"value="開始"> <INPUT type="reset" name="reset" valiu="消去"> </FORM>
- ベストアンサー
- JavaScript
プルダウンメニューのボタンの色を変えるには？
自分のHPにプルダウンメニューにて曲を選択し、BGMが流れるようにしています。曲を流すことには、著作権等を含め問題ありません。 HPは、白と青を基調とした爽やかな感じにするため、スクロールバーも、バー自体は白、バーの枠とボタンの三角印のみ青に変更しています。しかし、プルダウンメニューのボタンは通常のグレーに黒の三角です。コレの色を変える方法、ありますか？タグはまずスクロールバーの色変更は、 <style type=text/css>  </STYLE> 曲を流すタグは、 <SCRIPT language="JavaScript"></SCRIPT> プルダウンメニューを置く場所に <FORM name="myForm"> <SELECT name="myMenu" size="1" onchange="myGo()"> <OPTION value="">BGM</OPTION> <OPTION value="song1.mp3">1曲目</OPTION> <OPTION value="song2.mp3">2曲目</OPTION> <OPTION value="song3.mp3">3曲目</OPTION> </SELECT> </FORM> としています。ご存知の方、よろしくお願いします。
- ベストアンサー
- HTML

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

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