- ベストアンサー
選択した値によって、同一ページ内に表示したい
ここ数日悩んでいるjavaスクリプト初心者です。 なんとか出来たのですが、理想のページとは違い、どうしてもわからないので教えていただきたいです。 具体的には **************************************************************************** 質問：性別を教えて下さい という選択肢を作り、 女性を選択した場合だけ、その下にさらに質問を表示するものを作りたいのです。 **************************************************************************** 現在のソースはこのようになっています。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script language="javascript" type="text/JavaScript"> <!-- function sex(){ var seibetu = window.document.getElementById('seibetu').value; if( seibetu == '1' || seibetu == '3'){ window.document.getElementById('q2').style.display = "none"; }else{ window.document.getElementById('q2').style.display = ""; } } // --> </SCRIPT></HEAD> <BODY bgcolor="#fdfdfd"> <CENTER> <TABLE cellpadding="7" width=400> <TR><TD align="left"><B><FONT color="#666600">質問：性別を教えて下さい</FONT></B> <SELECT name="seibetu" onchange="sex();"> <OPTION value="0" selected="selected">選択してください</OPTION> <OPTION value="1">男性</OPTION> <OPTION value="2">女性</OPTION> <OPTION value="3">ひみつ</OPTION> </SELECT> </TD> </TR> <TR id="q2"> <TD align="left"><br>●<B>女性の方にお聞きします</B><br><br> お子さまはいらっしゃいますか？<br><INPUT type="radio" name="answer2" value="1">いる <INPUT type="radio" name="answer2" value="0">いない <INPUT type="radio" name="answer2" value="2">現在妊娠中 </TD> </TR> </TABLE> </CENTER> </BODY> </HTML> このソースだとページを表示した時に ●女性の方にお聞きします以下が表示され、男性またはひみつを選択した時点で非表示になります。 理想は最初は非表示で、女性を選択した時だけ表示するように作りたいのですが、どうしてもわかりません。 スタイルシートを使ったりしないと出来ないのでしょうか？ お知恵を拝借したいです。宜しくお願いします。
- jun-chan_
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ロジックを整理しさえすれば、できます。 方法はいろいろあるでしょうが、今のものをそのまま使うとして・・・ 最初にHTMLが表示されたときに、質問は表示されてしまいますので、スクリプトを「選択ボックスが女性（=2）でない時は非表示にする」ようにしておいて、さらに、始めに一度スクリプトを実行するようにしてはいかがでしょうか？ （最初は値は0なので非表示になる） ＜例＞ <script language="javascript" type="text/JavaScript"> <!-- window.onload = function(){sex();} function sex(){ var seibetu = window.document.getElementById('seibetu').value; if( seibetu != '2'){ window.document.getElementById('q2').style.display = "none"; }else{ window.document.getElementById('q2').style.display = ""; } } // --> </script>
その他の回答 (1)
- LegaC2
- ベストアンサー率52% (224/428)
innerHTMLとdivタグを使用すれば可能です。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script language="javascript" type="text/JavaScript"> <!-- function sex(){ var seibetu = window.document.getElementById('seibetu').value; if( seibetu == '1' || seibetu == '3'){ window.document.getElementById('q2').style.display = "none"; }else{ window.document.getElementById('q2').style.display = ""; window.document.getElementById('LadyOnly').innerHTML = '<br>●<B>女性の方にお聞きします</B><br><br>お子さまはいらっしゃいますか？<br><INPUT type="radio" name="answer2" value="1">いる <INPUT type="radio" name="answer2" value="0">いない <INPUT type="radio" name="answer2" value="2">現在妊娠中'; } } // --> </SCRIPT></HEAD> <BODY bgcolor="#fdfdfd"> <CENTER> <TABLE cellpadding="7" width=400> <TR><TD align="left"><B><FONT color="#666600">質問：性別を教えて下さい</FONT></B> <SELECT name="seibetu" onchange="sex();"> <OPTION value="0" selected="selected">選択してください</OPTION> <OPTION value="1">男性</OPTION> <OPTION value="2">女性</OPTION> <OPTION value="3">ひみつ</OPTION> </SELECT> </TD> </TR> <TR id="q2"> <TD align="left"> <div id="LadyOnly"></div> </TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
お礼
LegaC2さん、早々の回答ありがとうございます！ 試したところ、思うような結果が出ました！！ innerHTMLタグ、初めて知りました。 これを使えばもっといろんなことが出来そうですね！ 私にも出来ることの幅が広がる気がします。 本当にスッキリしました。ありがとうございました。
関連するQ&A
- セレクトメニューで選んだ値を同じページの別の場所へ表示する方法
セレクトメニューで選んだ値を同じHTML内の別の箇所へ表示させる方法がわかりません。 どなたか分かる方が居ましたら、回答お願い致します。 下記のような例です。 <BODY> <FORM method="post" Name="Application" action="bin/regist.cgi" onSubmit="return Check()"> <input type="hidden" name="subject" value="申し込み"><input type="hidden" name="nexthtm" value="index.html"> <CENTER> <SELECT name="RATE" size="1" tabindex="1"> <OPTION>▼選択</OPTION> <OPTION value="ドル">ドル</OPTION> <OPTION value="円" selected>円</OPTION> </SELECT><BR><BR> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD width="90" align="center"><INPUT size="10" type="text" name="PRICE" tabindex="6" onChange="CheckTxt1(this.value);"></TD> <TD></TD> <TD>ここに選んだ単位を表示したい</TD> </TR> </TBODY> </TABLE> <BR> <TABLE border="0"> <TR><TD colspan="3" align="center"> <INPUT type="submit" value=" 送 信 " tabindex="45"> <INPUT type="reset" value=" リセット " tabindex="46"> <BR> </TD></TR> </TABLE> </CENTER> </FORM> </BODY>
- ベストアンサー
- HTML
- JSでページ内の表示を変えた時の問題について
どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。 Javascriptを利用して、プルダウンメニューの選択肢を選んで ページ内の表示を変更したときの問題なのですが、 選択後submitボタンで次のページに移動しブラウザの戻るボタンで前ページに戻ると プルダウンメニューにはさきほど選択したものが残っているのですが、 変更したはずの表示部分が元に戻ってしまいます。 FireFoxで確認した場合、この症状はみられませんでした。 IEの仕様なのでしょうか？ どなたか解決方法が分かりましたらご教授お願い致します。 【ソース】 <html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Type" Content="text/Javascript"> <title>テスト</title> <script type="text/javascript"> <!-- //表示変更 function showthis(obj) { if(!obj) return false; if(document.getElementById) { for( i=0; i<=5; i++ ){ document.getElementById( "1_"+ i ).style.display = "none"; document.getElementById(obj).style.display = "block"; } } else { return false; } } --> </script> </head> <body> <form name="one" action="./two.html" method="POST"> <table class="box2"> <tr class="tr1"> <td class="pdown"> <select name="q1" onChange="showthis(this.value)"> <option value="1_0" selected>---- 選んでください ----</option> <option value="1_1"> １ － いち</option> <option value="1_2"> ２ － に－</option> <option value="1_3"> ３ － さん</option> <option value="1_4"> ４ － よん</option> <option value="1_5"> ５ － ご</option> </select> </td> </tr> </table> <div id="youso"> <table class="box1"> <tr> <td> <div id="q1"> <div id="1_0"> <p>【---- 選んでください ----】</p> </div> <div id="1_1" style="display: none;"> <p>【１ － いち】</p> </div> <div id="1_2" style="display: none;"> <p>【２ － に－】</p> </div> <div id="1_3" style="display: none;"> <p>【３ － さん】</p> </div> <div id="1_4" style="display: none;"> <p>【４ － よん】</p> </div> <div id="1_5" style="display: none;"> <p>【５ － ご】</p> </div> </div> </td> </tr> </table> </div> <input type="submit" name="" value="次へ進む"> </form> </body> </html>
- ベストアンサー
- JavaScript
- selectでinputの表示を変えたい
セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト１ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト２ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト３ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト１のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更 セレクト２のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更 という感じにしたいのですが、可能でしょうか？ 可能であれば書き方を教えていただけると助かります。 よろしくおねがいします。
- 締切済み
- JavaScript
- JavaScriptでの表の行の表示・非表示の切り替え
現状では、テスト1を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。 テスト1を選択した時だけ2行表示し、テスト1以外を選択した時は非表示にするにはどうすればよいのでしょうか。 <html> <head> <title>テスト</title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "test1"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "test1"){ if(document.getElementById){ document.getElementById("test1").style.display = "none"; } } } // --> </script> </head> <body> <table border="1" width="367"> <tr> <td width="134"> <form> <select onchange="showthis(this)"> <option selected="selected">選んでください</option> <option value="test1">テスト１</option> <option value="test2">テスト２</option> <option value="test3">テスト３</option> </select> </form> </td> <td width="217"> <p>テスト</p> </td> </tr> <tr> <td width="134"> <p> </p> </td> <td width="217"> <p> </p> </td> </tr> </table> <div id="test1" style="display:none;"> （本来はここに2行追加したい） </div> </body> </html>
- ベストアンサー
- JavaScript
- option 選択による表示＆非表示
<select name="var"> <option value="1">見せる</option> <option value="2">見せない</option> </select> <!--内容--> <table> <tr></td>内容</td></tr> </table> option 「見せる」を選択した場合、テーブル全体が<tabel>~</table>が表示、 option 「見せない」を選択した場合、テーブル全体が<tabel>~</table>が表示されなようにしたいです。 ご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
- フォーム内の値のチェックについて
このようなフォーム(aspでセレクトボックスの数は可変になります。)にてSubmit時に 同じ値が選ばれていたらalertを出すJavaScriptを作りたいのですが、 どのようなものを作ればよろしいでしょうか？ <FORM name="TestForm" action="" method="POST" target=""> <TABLE border="1" cellspacing="0" cellpadding="0" width="100%"> <TR> <td>1位</td> <TD> <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> <td>2位</td> <TD > <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> <td>3位</td> <TD> <select name="Select1"> <OPTION value="449">[選択なし]</OPTION> <OPTION value="465">あ</OPTION> <OPTION value="466">い</OPTION> <OPTION value="467">う</OPTION> </select> </TR> </TABLE> <TR><TD> <INPUT type="submit" value=登録 name=B1 onClick=""> </TD></TR> </FORM>
- ベストアンサー
- JavaScript
- 同じものを繰り返し表示させる
下記の(1)のような「1」～「3」まで選択可能なセレクトメニューにおいて、 「1」を選択すると(2)の部分を1つ、「2」を選択すると(2)の部分を2つ、「3」を選択すると(2)の部分を3つ、表示させるようにしたいと思っています。 (2)の部分を3つ書き、JavaScriptを使用して(1)のセレクトメニューで選択した数によって、 (2)の部分を1つ表示させたり、2つ表示させたり、3つ表示させたりすることはできました。 しかし、3つならまだよいのですが、5つ、6つ、それ以上となると、 (2)の部分を5つ、6つも同じことを書くのは面倒で、無駄が多いように思います。 (2)の部分を1つだけ書いた上で、(1)の選択した数の分だけ(2)を表示させる方法はないでしょうか。 よろしくお願いいたします。 (1)-------------------------------- <select name="id"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> ----------------------------------- (2)-------------------------------- <table> <tr> <td> <select name="number"> <option value="1000">1000</option> <option value="2000">2000</option> <option value="3000">3000</option> </select> </td> </tr> <tr> <td> <select name="name"> <option value="sato">sato</option> <option value="sakamoto">sakamoto</option> <option value="hanada">hamada</option> <option value="wakui">wakui</option> </select> </td> </tr> </table> -----------------------------------
- ベストアンサー
- HTML
- 選択ボックスで選んだものに応じて値を変更する方法
片方の選択ボックスで選んだものに応じて もう片方の選択ボックスの表示内容を変更したいと思います。 「なす」を選んだら３０円 「きゅうり」を選んだら４０円 「ねぎ」を選んだら５０円 「選んで下さい。」を選んだら０円（初期値） としたいと思うのですが、下記内容をどのように 変更すればよろしいのでしょうか。 教えて下さい。 <table border="0" width="700"> <tr> <td width="50%"> <select name="野菜"> <option value="SENTAKU">選んで下さい。</option> <option value="NASU">なす</option> <option value="KYUURI">きゅうり</option> <option value="NEGI">ねぎ</option> </select> </td> <td> <select name="値段"> <option value="NEDAN">０円</option> </select> </td> </tr> </table>
- ベストアンサー
- HTML
- セレクトボックス の 選択規制
今、フォームで入力画面を作っています。 その中にセレクトボックスが４つアリ、現在「未選択」の場合エラーチェックをするようにしています。 そして、ここにもうひとつのチェックを追加したいのですが皆目見当が付きません・・・ 条件 kaikai、bunkai1、bunkai2、heikai 全てが不参加の場合 "参加する会を最低一つは選択してください。"と言うコメントをだすというものです。 皆様よろしくお願いいたします。 ******** 現在の JavaScript ********* <SCRIPT language="JavaScript"> <!-- //フォームチェック function fcheck() { if(document.form1.kaikai.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.bunkai1.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.bunkai2.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.heikai.value == "未選択") { window.alert("選択してください"); return false; } } //--> </SCRIPT> ******** HTML内のフォーム ********* <table> <tr><th>1 ( * )</th> <td> <SELECT NAME="kaikai"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>2 ( * )</th> <td> <SELECT NAME="bunkai1"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>3 ( * )</th> <td> <SELECT NAME="bunkai2"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>4 ( * )</th> <td> <SELECT NAME="heikai"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> </table>
- ベストアンサー
- JavaScript
- 複数のselectで値で1つも選択されていないとき
POST-MAIL(http://www.kent-web.com/data/postmail.html)で注文フォームを作成中で、 複数の商品の個数（デフォルトでは0に設定）をselectで選択させようとしています。 例： <tr><td class="center">NO.01</td><td>あんまん</td> <td><select name="あんまん"><option selected value="">0</option> <option value="1">1</option> （～略～） <option value="9">9</option></select></td></tr> <tr> <td class="center">NO.02</td><td>にくまん</td> <td><select name="にくまん"><option selected value="">0</option> <option value="1">1</option> （～略～） <option value="9">9</option></select></td></tr> POSTMAILの機能では、formのinput valueに入力必須項目を記入できますが、 これに加え、すべての商品のselect値が「0」に設定されている場合も cgiのエラー画面でエラーメッセージを出したいのですが、可能でしょうか？ お知恵を貸していただけるようお願いいたします。
- ベストアンサー
- CGI
お礼
fujillinさん、早々の回答ありがとうございます。 試したところ、思うような結果が出ました！！ 今のものをそのまま使う前提でアドバイスいただいたことがとても嬉しかったです。 おかげさまでちょっと変えただけで思う結果が得れたのでビックリです。 本当にスッキリしました。ありがとうございました。