- ベストアンサー
ちょっとおかしい質問かも、、
こんにちは。 セレクトボックスについての質問をさせてください。 セレクトボックスで、ある項目を選択し、そのページへ移動させるというものがありますよね。 あれは、JavaScriptを使わなければ出来ないのでしょうか。 JavaScriptを使わずに、htmlだけでＨＰを作っているのですが、 参考にしようとしたサイトの＜ｓｅｌｅｃｔ＞タグ内の onChange="location.href=this.options[this.selectedIndex].value" の意味がわからなくて、、（＾-＾；）ヾ なんとかhtmlで、他のページに飛べるようにしたいのですが、、 やっぱり無理なのでしょうか。 おかしな質問だったらごめんなさい。
- みんなの回答 （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)
再度失礼します。 <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でも動作してくれると思います。 度々失礼しました。
>どうしても他のページに飛んでくれませんでした（_ _ ，） optionとvalueの間に、スペースが必要です。 optionは要素名、valueは属性名。
お礼
できました！できました！ すっごく嬉しいです☆ありがとうございました。 こんなに喜んでいながら、実は教えていただいたサイトに載っていたものを コピーして自分のＨＰに埋め込んだだけなんですけど、、（＾-＾；）ヾ ありがとうございました☆☆
補足
最後に1つ教えてください（>_<） <head>内と、<body>内の<select>以降はそのままでいいのでしょうか、、？ 一応問題なく動いていますが、自分のＨＰ用に変えて使うものなのかなぁと思ったので、、
- arukamun
- ベストアンサー率35% (842/2394)
こんにちは 純粋に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を入れて、クリックしたのと同じ動作になります。
補足
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以降はこのままでいいのでしょうか？ 色々なサイトで、これについて説明しているものがあったので真似してやってみたのですが、 どうしても他のページに飛んでくれませんでした（_ _ ，） 飛ぶ先のページにも何かする必要があるのでしょうか。 時間がある時でかまわないので、お返事をお願いします（>_<）
onChangeなど、on***のつく属性が含まれていた場合、その動作はJavaScriptを利用したものになります。 これらはイベントハンドラといって、JavaScriptなどで利用されるものなので、HTMLのみでページデザインをするというケースでは一切利用できないと考えるのが無難でしょう。 試しに、参考にしたサイトで、ブラウザのJavaScriptをoffにして(IEであれば、インターネットオプションからセキュリティタブを開いてレベルのカスタマイズを開き、アクティブスクリプトの項目をオフにしてみてください)、動作するかどうかを確認してみると良いでしょう。 動かなければ、それはJavaScriptに依存したものになります。 なお、質問文にあるonselectの部分は、セレクトボックスの項目が選択された時点で、その選択されたオプションに指定されているValue属性の中身をURLとして参照し、ページを移動させるJavaScriptが入っています。 短いですが、これもJavaScriptを利用しているものです。 おそらく、セレクトボックスをページ遷移のきっかけにするには、JavaScriptが必須だと思います。 JavaScriptを排除するのであれば、ページを移動するきっかけとしてフォーム部品を利用するのは避け、素直にリンクを張るのが良いと思いますよ。 参考になれば…
お礼
お返事ありがとうございます。 lead1976さんのアドバイス通り、OFFにしたら動かなってしまいました。 ということは、、やっぱりJavaScriptを使っているのですね。 Javaを使いこなせたらもっと可能性が広がるのに、、そこまで手が回らない（_ _ ，） でもいずれは使えるように少しずつ勉強してみます。 ありがとうございました（＾-＾*）
お礼
lead1976さん、こんにちは（＾-＾*）アドバイスありがとうございます☆ valueの中を自分のページのアドレスに変えて使ってみましたが、何とか無事に機能してくれているようです。 図々しくも、「補足」の方に１つ質問を書かせて頂きました。 お時間のある時でかまいませんのでお返事を下さい！お願いします（>_<）
補足
ページの中に、セレクトボックスを作ることはできたのですが、 それを右端に置く（右寄せする）ことが出来ません。 左端と真ん中に置く方法はわかるのですが、、。 <form></form>の前にスペースを沢山入れたてみたり <align></align>でrightを指定してみたりと 幾つか試したのですが反応無しでした（＾-＾；）ヾ どうしたらページの右端に寄ってくれるのでしょうか、、