アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：kuroari
  • 質問日時：
  • 回答数：5件

こんにちは。
セレクトボックスについての質問をさせてください。
セレクトボックスで、ある項目を選択し、そのページへ移動させるというものがありますよね。
あれは、JavaScriptを使わなければ出来ないのでしょうか。

JavaScriptを使わずに、htmlだけでＨＰを作っているのですが、
参考にしようとしたサイトの＜ｓｅｌｅｃｔ＞タグ内の
onChange="location.href=this.options[this.selectedIndex].value"
の意味がわからなくて、、（＾-＾；）ヾ
なんとかhtmlで、他のページに飛べるようにしたいのですが、、
やっぱり無理なのでしょうか。
おかしな質問だったらごめんなさい。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： lead1976
  • 回答日時：

補足読みました。



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;"」を追加することでも一応可能でしょう。 この場合、セレクトボックス類は右寄せになり、後に続く文章がその左側に回りこみます。

参考になれば…
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： lead1976
  • 回答日時：

再度失礼します。



<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を指定してみたりと
幾つか試したのですが反応無しでした（＾-＾；）ヾ
どうしたらページの右端に寄ってくれるのでしょうか、、

補足日時：2003/08/18 18:06
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2003/08/18 18:01

No.3

>どうしても他のページに飛んでくれませんでした（_ _ ，）



　optionとvalueの間に、スペースが必要です。

　optionは要素名、valueは属性名。

参考URL：http://www.openspc2.org/reibun/javascript/form_s …

この回答への補足

最後に1つ教えてください（>_<）

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

補足日時：2003/08/16 19:38
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2003/08/16 19:32

No.2

  • 回答者： arukamun
  • 回答日時：

こんにちは



純粋に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以降はこのままでいいのでしょうか？

色々なサイトで、これについて説明しているものがあったので真似してやってみたのですが、
どうしても他のページに飛んでくれませんでした（_ _ ，）
飛ぶ先のページにも何かする必要があるのでしょうか。
時間がある時でかまわないので、お返事をお願いします（>_<）

補足日時：2003/08/16 17:58
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： lead1976
  • 回答日時：

onChangeなど、on***のつく属性が含まれていた場合、その動作はJavaScriptを利用したものになります。


これらはイベントハンドラといって、JavaScriptなどで利用されるものなので、HTMLのみでページデザインをするというケースでは一切利用できないと考えるのが無難でしょう。
試しに、参考にしたサイトで、ブラウザのJavaScriptをoffにして(IEであれば、インターネットオプションからセキュリティタブを開いてレベルのカスタマイズを開き、アクティブスクリプトの項目をオフにしてみてください)、動作するかどうかを確認してみると良いでしょう。 動かなければ、それはJavaScriptに依存したものになります。

なお、質問文にあるonselectの部分は、セレクトボックスの項目が選択された時点で、その選択されたオプションに指定されているValue属性の中身をURLとして参照し、ページを移動させるJavaScriptが入っています。 短いですが、これもJavaScriptを利用しているものです。

おそらく、セレクトボックスをページ遷移のきっかけにするには、JavaScriptが必須だと思います。 JavaScriptを排除するのであれば、ページを移動するきっかけとしてフォーム部品を利用するのは避け、素直にリンクを張るのが良いと思いますよ。

参考になれば…
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2003/08/16 18:07

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報