こんにちは。
セレクトボックスについての質問をさせてください。
セレクトボックスで、ある項目を選択し、そのページへ移動させるというものがありますよね。
あれは、JavaScriptを使わなければ出来ないのでしょうか。
JavaScriptを使わずに、htmlだけでHPを作っているのですが、
参考にしようとしたサイトの<select>タグ内の
onChange="location.href=this.options[this.selectedIndex].value"
の意味がわからなくて、、(^-^;)ヾ
なんとかhtmlで、他のページに飛べるようにしたいのですが、、
やっぱり無理なのでしょうか。
おかしな質問だったらごめんなさい。
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;"」を追加することでも一応可能でしょう。 この場合、セレクトボックス類は右寄せになり、後に続く文章がその左側に回りこみます。
参考になれば…
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でも動作してくれると思います。
度々失礼しました。
この回答への補足
ページの中に、セレクトボックスを作ることはできたのですが、
それを右端に置く(右寄せする)ことが出来ません。
左端と真ん中に置く方法はわかるのですが、、。
<form></form>の前にスペースを沢山入れたてみたり
<align></align>でrightを指定してみたりと
幾つか試したのですが反応無しでした(^-^;)ヾ
どうしたらページの右端に寄ってくれるのでしょうか、、
lead1976さん、こんにちは(^-^*)アドバイスありがとうございます☆
valueの中を自分のページのアドレスに変えて使ってみましたが、何とか無事に機能してくれているようです。
図々しくも、「補足」の方に1つ質問を書かせて頂きました。
お時間のある時でかまいませんのでお返事を下さい!お願いします(>_<)
No.3
- 回答日時:
>どうしても他のページに飛んでくれませんでした(_ _ ,)
optionとvalueの間に、スペースが必要です。
optionは要素名、valueは属性名。
参考URL:http://www.openspc2.org/reibun/javascript/form_s …
この回答への補足
最後に1つ教えてください(>_<)
<head>内と、<body>内の<select>以降はそのままでいいのでしょうか、、?
一応問題なく動いていますが、自分のHP用に変えて使うものなのかなぁと思ったので、、
できました!できました!
すっごく嬉しいです☆ありがとうございました。
こんなに喜んでいながら、実は教えていただいたサイトに載っていたものを
コピーして自分のHPに埋め込んだだけなんですけど、、(^-^;)ヾ
ありがとうございました☆☆
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を入れて、クリックしたのと同じ動作になります。
この回答への補足
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以降はこのままでいいのでしょうか?
色々なサイトで、これについて説明しているものがあったので真似してやってみたのですが、
どうしても他のページに飛んでくれませんでした(_ _ ,)
飛ぶ先のページにも何かする必要があるのでしょうか。
時間がある時でかまわないので、お返事をお願いします(>_<)
No.1
- 回答日時:
onChangeなど、on***のつく属性が含まれていた場合、その動作はJavaScriptを利用したものになります。
これらはイベントハンドラといって、JavaScriptなどで利用されるものなので、HTMLのみでページデザインをするというケースでは一切利用できないと考えるのが無難でしょう。
試しに、参考にしたサイトで、ブラウザのJavaScriptをoffにして(IEであれば、インターネットオプションからセキュリティタブを開いてレベルのカスタマイズを開き、アクティブスクリプトの項目をオフにしてみてください)、動作するかどうかを確認してみると良いでしょう。 動かなければ、それはJavaScriptに依存したものになります。
なお、質問文にあるonselectの部分は、セレクトボックスの項目が選択された時点で、その選択されたオプションに指定されているValue属性の中身をURLとして参照し、ページを移動させるJavaScriptが入っています。 短いですが、これもJavaScriptを利用しているものです。
おそらく、セレクトボックスをページ遷移のきっかけにするには、JavaScriptが必須だと思います。 JavaScriptを排除するのであれば、ページを移動するきっかけとしてフォーム部品を利用するのは避け、素直にリンクを張るのが良いと思いますよ。
参考になれば…
お返事ありがとうございます。
lead1976さんのアドバイス通り、OFFにしたら動かなってしまいました。
ということは、、やっぱりJavaScriptを使っているのですね。
Javaを使いこなせたらもっと可能性が広がるのに、、そこまで手が回らない(_ _ ,)
でもいずれは使えるように少しずつ勉強してみます。
ありがとうございました(^-^*)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンが両方とも選択で...
-
INPUT TYPE
-
「value」に2つの値をセットす...
-
FORMのselectの選択肢を最初か...
-
チェックボックスとセレクトボ...
-
選択したファイル名を取得する...
-
iframeごとに戻るボタンを
-
VB.net データーグリッドビュー...
-
シングルコーテーション(')と...
-
プログラミングについての質問...
-
チェックボックスの返す値
-
MSPゴシックで、一番幅を取る文字
-
vsftpd+sslでアップロードできない
-
WEBページを強制的に横画面で見...
-
CGIでチェックボックスを使...
-
Error: No Recipient というエ...
-
wordの数式について 定積分を書...
-
tracert ができない原因
-
別サーバーのcgiへバイナリデー...
-
ファイルダウンロードで、DBCS...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ラジオボタンが両方とも選択で...
-
「value」に2つの値をセットす...
-
select値をhiddenのvalueに渡し...
-
INPUT TYPE
-
FORMのselectの選択肢を最初か...
-
ラジオボタンを選択済みにする...
-
チェックボックスとセレクトボ...
-
チェックボックスグループの一...
-
iframeごとに戻るボタンを
-
リストボックス(multipleなsel...
-
ラジオボタンとセレクトメニュ...
-
買い物カゴの作成
-
PHPで検索ボタンを押さずに検索...
-
selectboxの画面遷移で、postデ...
-
ある条件での必須入力について
-
<select>タグの幅設定
-
検索窓をクリックすると文字が...
-
a href のリンク先に引数を追加
-
プルダウンメニューでValue値を...
-
一つの検索窓で複数のサイトか...
おすすめ情報