• 締切済み

プルダウンメニューのHTMLタグ

プルダウンメニューを自分のホームページに取り入れたいのですが、 フレームで区切っているためにリンク先をどうやって設定すればいいか困っています。 ちなみに、プルダウンのタグはやはりこの質問サイトで見つけた 新しいページを開いてロードしたいのであれば、 <SELECT onChange="window.open(this.value,'_new'); return false ;"> <OPTION> <OPTION VALUE=http://www.goo.ne.jp/>goo <OPTION VALUE=http://www.google.co.jp/>google <OPTION VALUE=http://www.yahoo.co.jp/>yahoo </SELECT> というのを使おうと思っています。 新しいウィンドウではちゃんと開きました。 ターゲットをrightという名前に設定したいのですが、どうすればいいでしょうか? とても困っています。。。 また、これだとプルダウンを開く前は文字のない状態なのですが、 文字を入れるにはどうしたらいいですか?例えば「選択してください」など。

  • HTML
  • 回答数2
  • ありがとう数9

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

optionでターゲットウィンドウにリンクする方法は、No.1さんの方法で動作します。 ただ、「フレーム」も「javascriptでのナビゲーション」も使うべきではありません。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』--strictにフレームはない 『JavaScript、・・・【中略】・・・などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。( https://support.google.com/webmasters/answer/35769?hl=ja#2 )』 "フレーム 問題 HTML - Google 検索( https://www.google.co.jp/search?num=30&safe=off&site=&source=hp&q=%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0+%E5%95%8F%E9%A1%8C+HTML&oq=%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0+%E5%95%8F%E9%A1%8C+HTML )"  現在はフレームで新しいペーづを作成することは、全くなくなったといってよいでしょう。新規サイトで見なくなって10年以上たちます。  できれば、きちんとリンクをリストで書いてスタイルシートでプルダウンにしましょう。

  • yukitakao
  • ベストアンサー率44% (16/36)
回答No.1

たぶん↓でできるかな? window.openは新しいウィンドウを開く機能ですので同じフレーム内で開くにはlocation.hrefを使います。 <SELECT onChange="if(this.value.length>0){window.right.location.href=this.value;}"> <OPTION VALUE="">選択してください</OPTION> <OPTION VALUE="http://www.goo.ne.jp">goo</OPTION> <OPTION VALUE="http://www.google.co.jp">google</OPTION> <OPTION VALUE="http://www.yahoo.co.jp">yahoo</OPTION> </SELECT> あと細かいツッコミどころいくつかあるので一度本などで体系的に勉強した方が早いかもしれません^^

関連するQ&A

  • プルダウンメニュー

     以下のプログラムですが! 仕様が二分割の縦分割フレームが特徴です。  左側フレームにリンクタグがあり、そのリンクタグをクリックすると、右フレームに HPが観れるようになっています。  しかし、プルダウンメニューのYahooをクリックしたらakkotyan.html、は左フレームになぜか 出てきてしまって困っています。   それともう1つ、プルダウンメニューのhouyhnhnmsをクリックしても何もフレームに出てこなくて無反応です?  そのほか   「クリックで動くプログラ」と「知恵袋 竹島問題」はちゃんと右フレームに出てきて  問題ありません。   プルダウンメニュータグのHPを右フレームに出すにはどうしたらできますか!?  宜しくお願いします。 -------------------------------------------------------- 左フレーム <html> <head> </head> <frameset cols="26%,*"> <frame src="left.html"name="menu"> <frame src="pronagare.html"name="contents"> </frameset> <html> ------------------------------------------------------- 右フレーム <html> <HTMl> <HEAD> <TITLE>プルダウンメニューのHPを右フレームへ表示したい</title> <script>addEventListener('load',function(ev){ document.forms['jump'].elements['to'].addEventListener('change',function(ew){ var map = { yahoo: './akkotyan.html', houyhnhnms: 'http://google.com/search?tbm=isch&q=houyhnhnms' }; var url = map[ew.target.value]; if (url) window.location = url; },false); },false)</script> <body> <form name=jump><select name=to> <option value='' selected>-</option> <option value=yahoo>Yahoo</option> <option value=houyhnhnms>Houyhnhnms</option> </form> </select> <P> <a href="pronagare.html"target="contents">クリックで動くプログラム</a><br> <a href="takesima.html"target="contents">知恵袋 竹島問題</a><br> </body> </html>

  • プルダウンメニューの利用

    htmlのプルダウンメニューを使用した値計算のインタフェースを作成したいと思っています。 プルダウンメニューに設定するメニュー項目に値を設定し、 onChangeを使用して、その値だけをPHPプログラムに渡すようにしたいのですが、 JavaScript部分をどのように書けばいいのか判りません。 どなたかご教授お願いいたします。 <form name="formtest" action="test.php" method="post"> <table> <tr> <th>カテゴリ*</th> <td> <SELECT NAME="iPlanet" onchange=""> <OPTION VALUE="9" selected>初期値 <OPTION VALUE="0">サンプル1 <OPTION VALUE="1">サンプル2 </SELECT> </td></tr> </table> </form> onchangeでValueの値をPHPに送りたいのです。 よろしくお願いします。

  • 【プルダウンメニュー】フレームの中のインラインフレームに、ターゲットを指定するには?

    現状は【フレームA(ヘッダー1)】【フレームB(ヘッダー2)】【フレームC(メイン)】【フレームD(フッター)】の4分割のうえに、更にフレームCの中に【インラインフレーム】があります。 フレーム3の中にプルダウンメニューを設置し、インラインフレームに表示させたいのですが上手く動作しません。 ※ちなみに、「var target = "フレームA名";」で試してみると動作はするのですが…。 という事は「フレームの中のインラインフレーム」という点がネックなのでしょうか? とあるソースを改良して使おうと思ったのですが、javascript素人につき行き詰まっています。どなたか回答いただけると嬉しいです。 <SCRIPT TYPE="text/javascript"> <!-- var target = "インラインフレーム名"; function jump(){ var url = document.form1.select.options[document.form1.select.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } // --> </SCRIPT> <FORM NAME="form1"> <SELECT NAME="select" onChange="jump()"> <option value="">お選びください <option value="Ahtml/arr">AAA <option value="B.html">BBB <option value="C.html">CCC <option value="D.html">DDD <option value="E.html">EEE </SELECT> </FORM>

  • フレームを使用した複数プルダウンメニュー

    こんにちは。 よくある質問もみたのですが「複数のプルダウンメニュー」「フレームを使ったプルダウン」というのはあるのですが、 フレームを使用して左フレームに複数プルダウン、そこで選んだものを右フレームに表示させるというのが見つかりませんでした。 「複数のプルダウンメニュー」もつくれますし、「別フレームに表示させる」こともできるのですが、 プルダウンを増やしたとたんに動きません。 ネームを変えてもみたのですがうまくいきません。 フレームを二つつくって <FRAMESET cols="35%,65%"> <FRAME src="n_menu.htm" name="manu">←こっちにプルダウンメニュー <FRAME src="n_main.htm"name="main">←こっちに表示 目次のhtmファイルで <SCRIPT LANGUAGE="JavaScript"> function openPage() { var list = document.forms[0].urlList; parent.frames[1].location = list.options[list.selectedIndex].value; } </SCRIPT> </HEAD> <FORM> <SELECT NAME="urlList" onChange="openPage()"> <OPTION SELECTED VALUE="cover1.htm">朝の歌 <OPTION VALUE="1.htm">1番目のページ <OPTION VALUE="2.htm">2番目のページ <OPTION VALUE="3.htm">3番目のページ </SELECT> </FORM> #上記をコピペして増やしてみた↓ <FORM> <SELECT NAME="urlList2" onChange="openPage()"> <OPTION SELECTED VALUE="cover2.htm">夜の歌 <OPTION VALUE="4.htm">4番目のページ <OPTION VALUE="5.htm">5番目のページ <OPTION VALUE="6.htm">6番目のページ </SELECT> </FORM> これだと2本目が表示されません。 どうすればいいか教えていただけないでしょうか?

  • フレームを使ったプルダウンメニュー

    フレームで「ヘッダー・左メニュー・右メインページ」というように3分割にし、左メニューに置いたプルダウンから項目を選ぶと右メインに表示される、という構造にしたいと思っています。 <HEAD>~</HEAD>内↓ <script language="JavaScript"> function jump(form) { var myindex=form.destination.selectedIndex window.open(form.destination.options[myindex].value, target="main"); } //--> </SCRIPT> プルダウン部分↓ <FORM NAME="form"> <SELECT NAME="destination"> <OPTION VALUE="a.html" SELECTED>あ</OPTION> <OPTION VALUE="k.html">か</OPTION> <OPTION VALUE="s.html">さ</OPTION> <OPTION VALUE="t.html">た</OPTION> <OPTION VALUE="n.html">な</OPTION> </SELECT> <INPUT TYPE="image" SRC="go.gif" onClick="jump(this.form)" BORDER="0"> </FORM> という様に記述した所、例えばプルダウンで「た」を選択した場合、右フレームにちゃんとt.htmlが表示されるのですが、左フレームのプルダウンの項目が「あ」に戻ってしまいます。「た」を選択した状態のまま残したいのですが。 ちなみにボタンに画像を使わず、<INPUT TYPE="button" ・・・・>にするとなぜか「た」選択の状態でちゃんと残ります。でも、できれば画像を使いたいのです。 うまいやり方をご存じの方は、教えていただけますか。おねがいします。

  • プルダウンメニューのターゲット指定について

    はじめまして。 ドリームウィーバー8を使用しております。 インラインフレーム内にプルダウンメニューを設置したいのですが <select onChange="DD_List_Link(this)"> <option value="#">メニュー</option> <option value="URL" target="_top">A</option> <option value="URL" target="_top">B</option> <option value="URL" target="_top">C</option> ・ ・ ・ このタグではターゲット指定が反映されません。 初心者で、的外れな質問かもしれませんが、回答頂ければ幸いです。 宜しくお願い致しますm(_)m 初心者で

    • ベストアンサー
    • HTML
  • プルダウンメニューでフォームのターゲット先を変更したい。

    プルダウンメニューでフォームのターゲット先を変更する方法をしえてもらえませんか? 下記の様にすると_topを指定しても新しいウィンドウが開いてしまいます。 <FORM name="test2" action="http://hoge.cgi" target=yyy.value> <INPUT type="text" size="34" name="word"><SELECT name="search"> <OPTION value="yahoo" selected>Yahoo!Japan</OPTION> <OPTION value="google">google</OPTION> </SELECT> <SELECT name="yyy"> <OPTION selected>窓選択</OPTION> <OPTION value="_blank">別窓</OPTION> <OPTION value="_top">同窓</OPTION> </SELECT> <INPUT type="submit" value="検索"> </FORM>

  • プルダウンを2個選び、その結果に基づき、値を返す。

    プルダウンを2個選び、その結果に基づき、値を返したいです。 以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー1</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー2</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。

  • プルダウンメニューの選択時のリンク先について

    「プルダウンメニューから選択すると、別ページにリンク」するページを 作成したいです。 以下の様に途中まではできたのですが、 「フレームを使わず、同じウインドウの別の箇所にリンク先を表示  ※プルダウンメニューはそのまま表示」 がどうしてもできません。xmlで作成している関係上、phpも使えません。 何か方法はありませんでしょうか。 <SCRIPT LANGUAGE="JavaScript"> <!-- function menuLink(linkLoc) { if(linkLoc !="") {window.aaa.location.href=linkLoc;} } //--> </SCRIPT> <form> <SELECT onChange="menuLink(this.options[this.selectedIndex].value)"> <OPTION SELECTED>Select</OPTION> <OPTION value="">××</OPTION> <OPTION value="">●●</OPTION> </SELECT> </form>

  • 複数のプルダウンメニューの作り方。

    ・Aリスト、Bリスト…とプルダウンメニューを複数含んだフォームを一つのhtmlに作りたいのですが、上手くいきません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="a001.html">A001</option> <option value="a002.html">A002</option> <option value="a003.html">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="b001.html">B001</option> <option value="b002.html">B002</option> <option value="b003.html">B003</option> </select> </form> ご指南の程宜しくお願いします。