- ベストアンサー
Webページのフォームに追加のオプションを表示する方法
- Webページのフォームに追加のオプションを表示する方法について教えてください。
- Outlook Expressの受信中の進行状況ダイアログのように、Webページのフォームのボタンを押すと追加のフォームが出たり隠れたりする方法を教えてください。
- 分かりやすい例えではありませんが、Webページのフォームのあるボタンを押すと、下部に追加のフォームが表示されるような仕組みを作りたいです。具体的な方法を教えてください。
- Thund_Bird
- お礼率43% (43/99)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんばんは。 #1 です。 補足をいただき、ありがとうございます。 ちょっと修正してみました。こんな感じでどうかな？ <html><head> <script language="JavaScript"> function test () { if(document.getElementById("SHOW").style.visibility == "visible") { document.getElementById("SHOW").style.visibility = "hidden"; document.frm.btn.value = " オプション >> "; } else { document.getElementById("SHOW").style.visibility = "visible"; document.frm.btn.value = " オプション << "; } } </script> </head> <body> <form name="frm"> <input type="checkbox">通常オプション<br> <input type="button" name="btn" value=" オプション >> " onClick="test();"> <div id="SHOW" style="visibility:hidden;"> 追加オプション：<br> <select name="sel"> <option>1111</option> <option>2222</option> <option>3333</option> </select> </div> </form> </body></html>
その他の回答 (1)
- hkd9001
- ベストアンサー率48% (99/204)
こんばんは。 こういう感じかしら？ <html><head> <script language="JavaScript"> function test () { if(document.getElementById("SHOW").style.visibility == "visible") { document.getElementById("SHOW").style.visibility = "hidden"; } else { document.getElementById("SHOW").style.visibility = "visible"; } } </script> </head> <body> <form> <input type="checkbox">通常オプション<br> <input type="button" value="追加オプション表示／非表示" onClick="test();"> <div id="SHOW" style="visibility:hidden;"> 追加オプション：<br> <select name="sel"> <option>1111</option> <option>2222</option> <option>3333</option> </select> </div> </form> </body></html>
補足
おお、自分が言いたかったのはまさにこれです。言い忘れていたんですが、追加メニューの表示・非表示が切り替わるときにボタンのテキストも変えるようにできますか？（たとえば非表示の時は「オプション >>」、表示されている時は「オプション <<」）初心者なので・・・；よろしくお願いします。
お礼
またまたありがとうございます。まさに自分のイメージしたとおり、完璧です！とても助かりました。ありがとうございます！