こんにちは。
セレクトボックスについての質問をさせてください。
セレクトボックスで、ある項目を選択し、そのページへ移動させるというものがありますよね。
あれは、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で質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンが両方とも選択で...
-
FORMのselectの選択肢を最初か...
-
「value」に2つの値をセットす...
-
ラジオボタンを選択済みにする...
-
iframeごとに戻るボタンを
-
INPUT TYPE
-
select値をhiddenのvalueに渡し...
-
買い物カゴの作成
-
チェックボックスとセレクトボ...
-
ちょっとおかしい質問かも、、
-
""でも表示されない方法ないですか
-
チェックボックスの返す値
-
wordの数式について 定積分を書...
-
【CGI】画像の表示の仕方【Mini...
-
VB.net データーグリッドビュー...
-
Error: No Recipient というエ...
-
cgi-libを使って変数値渡しをし...
-
[HTML]プルダウンメニューの横...
-
Mechanizeにおけるボタンクリッ...
-
WEBページを強制的に横画面で見...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ラジオボタンが両方とも選択で...
-
「value」に2つの値をセットす...
-
INPUT TYPE
-
select値をhiddenのvalueに渡し...
-
FORMのselectの選択肢を最初か...
-
チェックボックスとセレクトボ...
-
リストボックス(multipleなsel...
-
ラジオボタンを選択済みにする...
-
OPTIONタグにループは使えない...
-
検索窓をクリックすると文字が...
-
NNでうまく動きません
-
チェックボックス選択で(3つ)...
-
フォームで絞込み検索機能を持...
-
メールフォームのプルダウンメ...
-
HTML プルダウンメニューの選択...
-
チェックボックスの余白を指定...
-
<select>タグの幅設定
-
フォームよりCGIへ複数の値をPO...
-
HP上の選択ボタンの選択肢リス...
-
プルダウンメニューにテキスト...
おすすめ情報