プルダウンから飛んだページを別ウインドウで開く方法

このQ&Aのポイント
  • 初歩的なJavaScriptで申し訳ないのですが、プルダウンの選択項目をクリックして別ウィンドウでページを開く方法について教えてください。
  • 以下のJavaScriptコードは、プルダウンで選択したURLに対応するページを開くためのものです。このコードを使用すると、ヤフーなどの選択肢をクリックすると、別ウィンドウで対応するページが開きます。
  • プルダウンから選択したURLに対応するページを別のウィンドウで開くためには、JavaScriptのlocation.hrefを使用します。以下のコードを使用すると、ヤフーなどの選択肢をクリックすると、別ウィンドウで対応するページが開きます。
回答を見る
  • ベストアンサー

プルダウンから飛んだページを別ウインドウで開く方法

初歩的なJavaScriptで申し訳ないのですが、ご教授願いします。 下記のプルダウンのJavaScriptで、例えばヤフーと言う部分を選択し、飛ぶをクリックするとヤフーに飛びますが、その際ヤフーにとんだページを別ウインドウで表示させたいのですが、お分かりの方いらっしゃいましたらこの素人に教えてください・・ <HTML> <HEAD> <script language="javascript"> <!-- function navi(obj) { url = obj.options[obj.selectedIndex].value; if(url != "") { location.href = url; } } //--> </script> </HEAD> <BODY> <form method=post> <select name="navi" size="10" "abc" onChange="document.b.submit()"> <option value="http://www.yahoo.co.jp/">ヤフー </select> <input type=button value="飛ぶ" onClick="location.href = this.form.navi.options[this.form.navi.selectedIndex].value"> </form> </BODY> </HTML>

質問者が選んだベストアンサー

  • ベストアンサー
  • bis_love
  • ベストアンサー率80% (4/5)
回答No.3

No.2の方が書いてあるとおり、onChange="document.b.submit()"が余分なのと、 <input type=button value="飛ぶ" onClick="location.href = this.form.navi.options[this.form.navi.selectedIndex].value"> のところで、 "location.href = this.form.navi.options[this.form.navi.selectedIndex].value" となっていることが原因です。 正しくは <input type=button value="飛ぶ" onClick="window.open(this.form.navi.options[this.form.navi.selectedIndex].value)"> とすることで別ウィンドウで開くようになります。 そうすると、上部で宣言されてる関数はいらなくなってしまいますね(^^; どうしても関数で処理させたい場合は、 <input type=button value="飛ぶ" onClick="location.href = this.form.navi.options[this.form.navi.selectedIndex].value"> で onClick="location.href = this.form.navi.options[this.form.navi.selectedIndex].value" となっているところを onClick="navi(this.form.navi)"のようにして、 関数内の location.href = url; というところを window.open(url); のようにしてあげれば動くと思います。 ただそうする場合、関数名「navi」がセレクトボックスの名前と被っているので違う名前に変えてあげないと動かないと思います。

その他の回答 (2)

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.2

onChange="document.b.submit()" が原因。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

location.href = url; の行を、 window.open(url); ってことでしょうか?

kaju1211
質問者

補足

回答ありがとうございます。window.open(url);で普通は別ウインドウで飛ぶはずなのですが、それに書き換えても同ウインドウのまま開きます・・

関連するQ&A

  • プルダウンから飛んだページにアクセスする方法

    アクセスする事が出来なくて困っています。初歩的なもので申し訳ないのですが、よろしくお願いします。 <HTML> <HEAD> <TITLE> </TITLE> <script language="javascript"> <!-- function navi(obj) { url = obj.options[obj.selectedIndex].value; if(url != "") { location.href = url; } } //--> </script> </HEAD> <BODY> <form method=post> <select name="navi">  <option value a href="URL">リンク <option value a href="URL">リンク1 <option value a href="URL">リンク2 <option value a href="URL">リンク3 </select> <input type=button value="ジャンプ" onClick="location.href =(this.form.navi.options[this.form.navi.selectedIndex].value)"> </form> </BODY> </HTML>

  • プルダウンからリンクをthicboxで開くには?

    プルダウンからリンクをthicboxで開くには? 宜しくお願い致します。 プルダウンでリンク先を選択し、そのリンク先のページをthicboxで表示させたく試行錯誤しているのですがうまくいきません。 thicboxでリンク先を開くためには、プルダウンのJavascriptをどのように修正すればよいのでしょうか? ■プルダウンでリンクさせるJavascriptとhtmlコード <html> <head> <script type="text/javascript"> function navi(obj) { url = obj.options[obj.selectedIndex].value; if(url != "") { location.href = url; } } </script> </head> <body> <form> <select name="navi"> <option value=""> --- リンクメニュー --- </option> <option value="http://www.yahoo.co.jp/">Yahoo!</option> <option value="http://www.goo.ne.jp/">Goo</option> </select> <input type=button value="表示する" onClick="location.href = this.form.navi.options[this.form.navi.selectedIndex].value"> </form> </body> </html> ■thicboxでURLを開くときのコード ※jquery.jsやthicbox.js、cssファイル等の外部ファイルの記述は省いております。 <a href="http://www.yahoo.co.jp?TB_iframe=true&width=800&height=500" class="thickbox">リンクテキスト</a> ※width・heightは適当に入れている数字です。 分かりづらい説明で申し訳ありません。 補足説明致しますので、どうかご教授下さいますようお願い致します。

  • プルダウンメニューが文字化けする

    タイトル通りプルダウンメニューが文字化けしてしまいます。javaを使ってホームページに表示させています <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <!--メニュー↓--> <script language="javascript"> <!-- function navi(obj) { url = obj.options[obj.selectedIndex].value; if(url != "") { location.href = url; } } //--> </script> <form method=post> <select name="navi">  <option value=""> --メニュー -- <option value="http://">TOPページ <option value="http://">特別企画 <option value="http://">ご挨拶 <option value="http://">ご協力 <option value="http://">PC版 <option value="http://">ブログ </select> <input type=button value="ジャンプ" onClick="location.href = this.form.navi.options[this.form.navi.selectedIndex].value"> </form> <!--メニュー↑-->

  • プルダウンメニューがIEだとエラー

    買い物かごをプルダウンメニューで作ったのですが、firefoxではちゃんと次のページ(かごに入れて、かごの中身を表示)に行くのに、IEだと、ちゃんとかごに入りません(ショッピングカートに入れられない、とエラーが出る)何故でしょうか? このタグを打っているのですが(タグ紹介のページでコピった)、間違っていますか? <script language="javascript"> <!-- function goToUrl(obj) { url = obj.options[obj.selectedIndex].value; if(url != "") { location.href = url;} } //--> </script> <form method="post"> <select onChange="goToUrl(this)"> <option value="">▽選択してください <option value="http://~">○○ <option value="http://~" >××</select> </form>

    • ベストアンサー
    • HTML
  • プルダウンから別ウィンドウを開く方法

    プルダウンから別ウィンドウを開く方法 jsで管理しているプルダウンメニューの一部を 別ウィンドウで表示させたいのです。 下記の000.htmlをblankで表示させたい場合 どのような記述になるのでしょうか? どうぞよろしくお願いします。 function launch_report(obj) { var location = obj.options[obj.selectedIndex].value; if (location) { top.document.location.href = location; } } function shouhin() { document.open(); document.write("<select name=\"hoge\" size=\"1\" class=\"form\" onChange=\"launch_report\(this\)\">"); document.write("<option value=\"000.html\">メニュー"); document.write("</select>"); document.close(); }

  • プルダウンメニューのリンクで別ウインドウを開く

    下記のようなプルダウンメニューを作成したのですが、同じウインドウ内でリンクするのではなく別ウインドウで開くようにするにはどこを変更すればよいのでしょうか? head内>>>>>>>>>>>>> <script language="JavaScript" type="text/JavaScript"> <!-- function gotoURL(formName){ var gotoUrl=document.forms[formName].elements[0].options[document.forms[formName].elements[0].selectedIndex].value document.location.href=gotoUrl } --> </script> body内>>>>>>>>>>>>>> <form name="fm0"> <select name="links"> <option selected><ここから選択してください></option> <option value="aaa.html">あああ</option> <option value="bbb.html">びびび</option> </select> <input name="BUTTON" TYPE=BUTTON onClick="gotoURL('fm0')" VALUE="GO!"></form>

  • プルダウンをもう一つ増やしたい&フレームページで使用のため、別ウインドウで表示させたい

    ↓他サイトさんにてサンプルで置いてあったものを拝借して自分なりにやってみました。 1、これをさらにもうひとつプルダウンを選択させて他サイトへジャンプさせる場合はどのようにしたらよいですか。 2、フレームページで使うので、他サイトの表示を別ウインドウで表示させたいのですが、どのようにしたらよいですか。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http:///www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "inline"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">選んでください</option> <option value="item1"></option> <option value="item2"></option> <option value="item3"></option> </select> <select id="item1" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item2" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item3" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> </form> </body> </html>

  • プルダウンメニューリンクを新しいウインドウで表示させたい

    ホームページビルダー11を使っています。プルダウンメニューからリンク先を「新しいウインドウ」で表示させるにはどのようにしたらよろしいのでしょうか。ご指導よろしくお願い致します <SCRIPT language="JavaScript"> <!--- 非表示 function quicklink(w){ if(w == "") return; document.quick.url.selectedIndex = 0; location.href =w; } //end ---> </SCRIPT> <FORM name="quick" action="./"><SELECT name="url" onchange="quicklink(this.form.url.options[this.form.url.selectedIndex].value)" size="1" tabindex="1"> <OPTION selected>■ リンク先を選んでクリック ■ </OPTION> <OPTION value="index.htm">その1</OPTION> <OPTION value="index-2.htm">その2</OPTION> <OPTION value="index-3.htm">その3</OPTION> </SELECT>←関連リンク先</FORM> <TABLE width="100%" border="1" cellpadding="0" cellspacing="0" class="hpb-subh02">

  • プルダウンメニューからインラインフーム内を操作する

    表題のようなものをjavascriptとフォームを使って 用意しましたが、IE6、IE7の環境で試験しましたが問題ありませんでした。 ところが、これをFirefoxで動かすと、プルダウンで選択してもインラインフレームは まったく変化しませんでした。 どちらでも動作するようにしたいのですがどのように改変すればよろしいでしょうか。 初心者でとんでもない間違いをしているかもしれませんが、どうかご教授ください。 現在以下のような記述になっています インラインフレーム名:inpage <!--javascript部 --> <script type="text/"> function jump(){ var url=document.form1.select1.options[form1.select1.selectedIndex].value; if (url!="") document.inpage.location.href = url; } </script> <!--javascript部 --> <!--フォーム部 --> <FORM NAME="form1"> <SELECT NAME="select1" onChange="jump()"> <option value="">選択してください <option value="AAAAA.html">AAAAA <option value="BBBBB.html">BBBBB <option value="CCCCC.html">CCCCC </SELECT> </FORM> <!--フォーム部 -->

  • javascript をhtmlページで使用する方法を教えてください。

    <form name=\"addr\"> リンク先-> <select name=\"list\" onChange=\"chg_url()\"> <option value=\"http://www.yahoo.co.jp\">yahoo1</option> <option value=\"http://www.yahoo.co.jp\">yahoo2</option> <option value=\"http://www.yahoo.co.jp\">yahoo3</option> </select> <a href=\"Dest\" target=_blank> リンク </a> </form> <script language=\"javascript\"> <!-- pos = 5555; for(num=0;num<document.links.length;num++) { if (document.links[num].href.indexOf(\"Dest\") != -1) { pos = num; num = 5000; } } function chg_url() { if (pos!=5555) { sel = document.addr.list.selectedIndex; document.links[pos].href = document.addr.list[sel].value; } } chg_url(); //--> </script> のスクリプトを同じページに何個も利用したいのですが、どうしたらうまくいきますか? 同じページにこのスクリプトを設置すると、全部同じページにリンクしてしまいます。java初心者なので、ぜひ教えてください。お願いします。 あと、「java」の質問回答の方に間違えて載せてしまいました。すみませんでした(>_<)