• ベストアンサー

ちょっとおかしい質問かも、、

こんにちは。 セレクトボックスについての質問をさせてください。 セレクトボックスで、ある項目を選択し、そのページへ移動させるというものがありますよね。 あれは、JavaScriptを使わなければ出来ないのでしょうか。 JavaScriptを使わずに、htmlだけでＨＰを作っているのですが、 参考にしようとしたサイトの＜ｓｅｌｅｃｔ＞タグ内の onChange="location.href=this.options[this.selectedIndex].value" の意味がわからなくて、、（＾-＾；）ヾ なんとかhtmlで、他のページに飛べるようにしたいのですが、、 やっぱり無理なのでしょうか。 おかしな質問だったらごめんなさい。

  • HTML
  • 回答数5
  • ありがとう数3

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

  • ベストアンサー
noname#199778
noname#199778
回答No.5

補足読みました。 formの右寄せ方法ですが、スタイルシートを使う方法が良いように思います。 <form style="text-align: right;"> <select onChange="location.href=this.options[this.selectedIndex].value"> <option value="http://www.（略）index.html">○○</option> <option value="http://www.（略）index.html">△△ </option> </select> </form> このようにformタグ内に「 style="text-align: right;"」と追加すると、formタグに囲まれているテキスト類が右寄せになり、セレクトボックスも右に寄ってくれると思います。 他には、セレクトボックスを右に飛ばして、続くテキストを左に回りこませるようになりますが、 <form style="float: right;"> <select onChange="location.href=this.options[this.selectedIndex].value"> <option value="http://www.（略）index.html">○○</option> <option value="http://www.（略）index.html">△△ </option> </select> </form> と、formタグに「 style="float: right;"」を追加することでも一応可能でしょう。 この場合、セレクトボックス類は右寄せになり、後に続く文章がその左側に回りこみます。 参考になれば…

その他の回答 (4)

noname#199778
noname#199778
回答No.4

再度失礼します。 <form> <select onChange="location.href=this.options[this.selectedIndex].value"> <option value="http://www.（略）index.html">○○</option> <option value="http://www.（略）index.html">△△ </option> </select> </form> フォームの部分が上記のように補足にあったものだった場合、JavaScriptはこの「onChange="location.href=this.options[this.selectedIndex].value"」の中で完結していますので、headやbody内のほかの部分に手を加える必要は特にないと思います。 ただ、option要素のvalue="http://***"の値に関しては、参照させたいページのURLに置き換えて使う必要があるでしょう。 なお、この中身はhttp://から始まる絶対URLでも、相対URLでも動作してくれると思います。 度々失礼しました。

kuroari
質問者

お礼

lead1976さん、こんにちは（＾-＾*）アドバイスありがとうございます☆ valueの中を自分のページのアドレスに変えて使ってみましたが、何とか無事に機能してくれているようです。 図々しくも、「補足」の方に１つ質問を書かせて頂きました。 お時間のある時でかまいませんのでお返事を下さい！お願いします（>_<）

kuroari
質問者

補足

ページの中に、セレクトボックスを作ることはできたのですが、 それを右端に置く（右寄せする）ことが出来ません。 左端と真ん中に置く方法はわかるのですが、、。 <form></form>の前にスペースを沢山入れたてみたり <align></align>でrightを指定してみたりと 幾つか試したのですが反応無しでした（＾-＾；）ヾ どうしたらページの右端に寄ってくれるのでしょうか、、

noname#30871
noname#30871
回答No.3

>どうしても他のページに飛んでくれませんでした（_ _ ，） 　optionとvalueの間に、スペースが必要です。 　optionは要素名、valueは属性名。

参考URL：
http://www.openspc2.org/reibun/javascript/form_selectmenu/003/index.html
kuroari
質問者

お礼

できました！できました！ すっごく嬉しいです☆ありがとうございました。 こんなに喜んでいながら、実は教えていただいたサイトに載っていたものを コピーして自分のＨＰに埋め込んだだけなんですけど、、（＾-＾；）ヾ ありがとうございました☆☆

kuroari
質問者

補足

最後に1つ教えてください（>_<） <head>内と、<body>内の<select>以降はそのままでいいのでしょうか、、？ 一応問題なく動いていますが、自分のＨＰ用に変えて使うものなのかなぁと思ったので、、

  • arukamun
  • ベストアンサー率35% (842/2394)
回答No.2

こんにちは 純粋にHTMLだけというのは無理だと思います。 HTML + JavaScript が一番簡単でしょうね。 JavaScriptが無かった頃は、CGIでやっていたので、こちらはもっと面倒です。 onChange="location.href=this.options[this.selectedIndex].value" の説明ですが、onChangeというのは、JavaScriptで、ここの値が変化した時に、=以下の構文を実行するという物です。 location.href に this.options[this.selectedIndex].value という変数を代入しています。 this.options[].value というのは、この<FORM>の<SELECT><OPTION>に指定された文字列の配列です。 []の中がthis.selectedIndexとなっているのは、現在選択された項目の添え字を入れています。 簡単に言えば、何番目が選択されたかですね。 これを入れることで、何番目の<OPTION>に指定された文字列という物を返します。 これをlocation.hrefに代入する事で、HTMLでいう所の<A HREF=xxxx>のxxxxに<OPTION>で指定したURLを入れて、クリックしたのと同じ動作になります。

kuroari
質問者

補足

onChangeの説明までしていただいてありがとうございました（>_<） また図々しく質問してしまいますが、 <form> <select onChange="location.href=this.options[this.selectedIndex].value"> <optionvalue="http://www.（略）index.html">○○</option> <optionvalue="http://www.（略）index.html">△△ </option> </select> </form> という感じのものを書くだけで、そのページに移動できるのですか？ onchange以降はこのままでいいのでしょうか？ 色々なサイトで、これについて説明しているものがあったので真似してやってみたのですが、 どうしても他のページに飛んでくれませんでした（_ _ ，） 飛ぶ先のページにも何かする必要があるのでしょうか。 時間がある時でかまわないので、お返事をお願いします（>_<）

noname#199778
noname#199778
回答No.1

onChangeなど、on***のつく属性が含まれていた場合、その動作はJavaScriptを利用したものになります。 これらはイベントハンドラといって、JavaScriptなどで利用されるものなので、HTMLのみでページデザインをするというケースでは一切利用できないと考えるのが無難でしょう。 試しに、参考にしたサイトで、ブラウザのJavaScriptをoffにして(IEであれば、インターネットオプションからセキュリティタブを開いてレベルのカスタマイズを開き、アクティブスクリプトの項目をオフにしてみてください)、動作するかどうかを確認してみると良いでしょう。 動かなければ、それはJavaScriptに依存したものになります。 なお、質問文にあるonselectの部分は、セレクトボックスの項目が選択された時点で、その選択されたオプションに指定されているValue属性の中身をURLとして参照し、ページを移動させるJavaScriptが入っています。 短いですが、これもJavaScriptを利用しているものです。 おそらく、セレクトボックスをページ遷移のきっかけにするには、JavaScriptが必須だと思います。 JavaScriptを排除するのであれば、ページを移動するきっかけとしてフォーム部品を利用するのは避け、素直にリンクを張るのが良いと思いますよ。 参考になれば…

kuroari
質問者

お礼

お返事ありがとうございます。 lead1976さんのアドバイス通り、OFFにしたら動かなってしまいました。 ということは、、やっぱりJavaScriptを使っているのですね。 Javaを使いこなせたらもっと可能性が広がるのに、、そこまで手が回らない（_ _ ，） でもいずれは使えるように少しずつ勉強してみます。 ありがとうございました（＾-＾*）

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • cgiへの送信とページリンクのできるプルダウンについて

    初めて質問させて頂きます。 cgiへ送る選択項目と別のページへリンクする項目をひとつの プルダウンでまとめたいと思っています。プルダウンを使って 別のページリンクするタグは分かるのですが、cgiへvalue値を 送るタグが分かりません。 <select onchange="top.location.href=this.options[this.selectedIndex].value"> ※別のページへリンク<option value="a.html">Aのページへ</option> ※cgiのname="A"へ"value値"B"を送る項目<option value="ここがわかりません">Bで検索</option> </select> 質問が分かりにくく大変申し訳ありませんが、ご指導下さると 幸いです。よろしくお願い致します。

  • フレーム

    <select onchange="location.href=this.options[this.selectedIndex].value"> <option value=""> <option value="http～">A <option value="http～">B <option value="http～">C </select> のスクロールでリンクしているページを、違うフレーム（Dとする）に表示させたいのですが、 <select onchange="location.href=this.options[this.selectedIndex].value"> <option value=""> <option value="http～"target="D">A <option value="http～"target="D">B <option value="http～"target="D">C </select> としても、現在のフレーム内にしか表示されません。 どうやればDに表示できますか？説明が下手ですいません。

  • セレクトボックスから別窓にジャンプするには

    ここまで↓はたどりつけたのですが、 <select onchange="location.href=this.options[this.selectedIndex].value"> <option value="#">検索サイトにジャンプ <option value="http://www.yahoo.co.jp/">Yahoo <option value="http://www.google.co.jp/">Google <option value="http://www.infoseek.co.jp/">Infoseek </select> 選ぶと別窓（新しいページ）にジャンプするようにするには どこに_blank（？）を入れればいいのでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • プルダウンメニューがＩＥだとエラー

    買い物かごをプルダウンメニューで作ったのですが、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
  • HTML教えて下さい！！！！

    セレクトメニューで別ウィンドウを開きたいのですが出来ません。 教えてください！！よろしくおねがいします。 <tr> <td> <select size="1" onchange="location.href = this.options[selectedIndex].value"> <option value="../○○○/○○○/index.html" selected>●●●●●</option> <option value="../○○○/○○○/index.html" >●●●●●</option> <option value="../○○○/○○○/index.html">●●●●●A</option> </select> </form></td> </tr> で、ブランクを入れてみたのですが、、、 <tr> <td> <select size="1" onchange="location.href = this.options[selectedIndex].value"> <option value="../○○○/○○○/index.html" target="_blank" selected>●●●●●</option> <option value="../○○○/○○○/index.html" target="_blank">●●●●●</option> <option value="../○○○/○○○/index.html" target="_blank">●●●●●</option> </select> </form></td> </tr> 、、、、ダメでした。間違っているんですよね。。。 よろしくお願いします。

  • セレクトメニューでジャンプしたページを新しいWindowで表示したい

    リンク先をセレクトメニューで選んでもらって、そのページ内に開く方法は色々なJavaScriptを紹介しているページで見せていただいたのですが、同じWindowではなく、新しいWindowを開いてそこに表示したいのです。 下記は同じWindow内に開いてしまいますが、現在はこのようなカンジで使用しています。 <form> <select onChange="location=this.options[this.selectedIndex].value"> <option value="">選択して下さい <option value="test1.html">TEST-1 <option value="test2.html">TEST-2 <option value="test3.html">TEST-3 </select> </form> 宜しくお願いしますm(_ _)m

  • selectbox と セキュリティ保護？

    <SELECT OnChange="location.href=this.options[this.selectedIndex].value"> <OPTION value="#" SELECTED>-- リンク候補 -- <OPTION value="http://xxx/">ページ１ <OPTION value="http://yyy/">ページ２ </SELECT> ネットで上記のような selectbox を使ったリンクをよく見かけますが、 便利そうなので、ブラウザ用のスタートページ(ローカルに置いてあります)に使おうとすると、 「セキュリティ保護のため、このコンピューターに・・・」といった警告がイチイチ出てしまいます。 ローカルでこの仕組みを使うなら、 セキュリティーレベルを下げないとダメなのでしょうか？ また同じような(省スペース、一発移動できるもの)やり方があれば教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • FORMボタン

    このフォーム変なのですか？ 見た目は、[年月] [GO] となっていて、 [年月]のセレクトで選んで、 [GO]ボタンを押せばそのページに飛ぶのだと思いますが、 [GO]を押さなくてもセレクトを選んだだけで動作します。 この[GO]のボタンの意味あるんでしょうか？ それとも何か間違っていますか？　正しい記述方法があれば教えてください。 <form> <select name="u" onchange="JavaScript:location.href=this.value;return false;"> <option value="http://～～/2009-05-1.html">2009/05</option> <option value="http://～～/2009-04-1.html">2009/04</option> </select> <input type="button" value="GO" onclick="JavaScript: location.href=this.form.u.value; return false;" /> </form>

    • ベストアンサー
    • HTML
  • プルダウンから飛んだページを別ウインドウで開く方法

    初歩的な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>

  • フォーム

    <FORM> <SELECT onchange="location=this.options[this.selectedIndex].value"> <OPTION value="">----- 一覧 -----</OPTION> <OPTION value="no1.html"target="f2">NO1</OPTION> </FORM> うまくできません　なぜでしょうか

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する