フォームのプルダウンでの選択で、2つのiframeに別々の内容を同時に表示させたいんですがどうすれば良いのでしょう。

具体的にはレシピページを作ってまして、プルダウンで料理名をセレクトすると、ひとつのiframeには料理の出来上がり画像が、もうひとつのiframeには料理の手順などのテキストが2つ同時に表示されるようにしたいんです。
どうすればよいのかお判りになる方、どうか教えてください。

回答の条件
  • 1人2回まで
  • 登録:2009/06/19 11:53:39
  • 終了:2009/06/22 11:14:00

ベストアンサー

id:den2sn No.1

den2sn回答回数14ベストアンサー獲得回数52009/06/19 12:23:26

ポイント60pt

iframeに名前をつけてJavaScriptで

指定するのはいかがでしょうか。

<iframe name="aframe">
</iframe>
<iframe name="bframe">
</iframe>
<br>
<select name="select" onchange="aframe.location=this.options[this.selectedIndex].value+'.html';bframe.location=this.options[this.selectedIndex].value+'2.html'">
  <option value="a">a
  <option value="b">b
</select>
id:minapoo

すみません、例えば「卵焼き」と「目玉焼き」いう選択肢があってtamagoyali.jpg、medamayaki.jpgという画像があって、tamagoyaki.html、medamayaki.htmlという料理手順を書いたhtmlがあった場合に、「卵焼き」を選択すればtamagoyali.jpgがiframe1に、tamagoyaki.htmlがiframe2に「目玉焼き」を選択すればmedamayaki.jpgがiframe1に、medamayaki.htmlがiframe2に表示するようにしたいのですが、教えていただいたもののどの部分に何を入れれば良いのでしょうか。本当に初歩的な質問ですみません。

2009/06/19 14:04:11
  • id:den2sn
    こんな感じでしょうか。

    <iframe name="iframe1">
    </iframe>
    <iframe name="iframe2">
    </iframe>
    <br>
    <select name="select" onchange="iframe1.location=this.options[this.selectedIndex].value+'.jpg';iframe2.location=this.options[this.selectedIndex].value+'.html'">
    <option value="tamagoyaki">卵焼き
    <option value="medamayaki">目玉焼き
    </select>
  • id:minapoo
    den2snさま
    出来ました!お手数掛けてすみませんでした。
    ありがとうございました!
  • id:minapoo
    またまたすみません、
    画像と料理手順htmlをそれぞれフォルダに入れてる場合(画像はrecipejpgフォルダ、料理手順はrecipetextフォルダ等)は、どういう風に記述すればよろしいでしょうか。もしよろしければ教えて下さいませんでしょうか。度々すみません。。
  • id:kebo987654
    「フォルダ名/ファイル名.html」でいけます。
    iframe1.location='recipejpg/'+this.options[this.selectedIndex].value+'.jpg';
    iframe2.location='recipetext/'+this.options[this.selectedIndex].value+'.html';

    参考までに上の階層は「../」で参照できます。
  • id:minapoo
    あ、kebo987654さん、すみません;
    できました!助かりました。
    ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません