画面分割している画面（上：A、下：B）

質問

いつもお世話になっております。
いま、タグ打ちでHTMLを作成していますが、GoogleやYahoo!で検索しても分からない部分があります。
画面分割している画面（上：A、下：B）があるのですが、Aでプルダウンリストをつくり、Bでプルダウンリストから選択した内容を表示したいのですが、なかなか分かりません。
HTMLに詳しい方、ご教授願います。
よろしくお願いします。

回答No.1

qualheart

質問のようなことをしたのであれば、二通りの方法がありますね。

まずひとつは、フレームを使う方法です。フレームは分かりますよね？
この場合は、Aに作ったプルダウンメニューで、ある特定の値を選択したら、Bのフレームに表示するHTMLを変更するというJavaScriptを組めば良いだけです。
select文とlocaiton.hrefを使った簡単だJavaScriptですから、「JavaScript フレームの内容を書き換える」等で検索しればすぐ見つかるでしょう。

もう一つの方法は、visibility: hiddenを使う方法ですね。
今はフレームを使ったHTMLはあまり推奨されないので、コチラの方がポピュラーな方法だと思います。

まずBの部分をDIVで区切り、このタグにID属性を設定します。このとき、切り替えたい表示ごとにDIVで囲み、最初に表示するものはvisibility: visibleに設定しておき、他はhiddenに設定しておきます。
<div id="a"　style="visibility;visible">～</div>
<div id="b"　style="visibility;hidden">～</div>
<div id="c"　style="visibility;hidden">～</div>
上記のように書くと、id=aのdivの中身のみが初期状態で表示され、id=bとcは非表示の状態になります。
この上でやはりselect文を使って、Aにあるプルダウンの選択肢を切り替えた場合に、id=aをhiddenに変更してid=bをvisibleに変更すると言ったJavaScriptを組めば良いです。
良くあるのは「画像の入れ替え」ですね。「JavaScript 画像の入れ替え」などで検索すれば、visibilityを使った表示切り替えのJavaScriptについて検索できると思います。

ご参考まで。

お礼

お礼の返事が遅くなってしまい、すいませんでした。
実は、あれから、いろいろと検索していたところ、画面分割したHTMLができました。
せっかく、回答をいただいて申し訳ありません。
試しましたが、ちょっとわからなかったので、現状のままにしたいと思います。
ご回答、ありがとうございました。