セレクトボックスからリンクを飛ばすには･･･

[新着] Webテンプレートを仮オープンしました

0   名前： 芽亞 ： 2007/01/24（水） 02:36  ID:pFJAz5SF sub-t1
【何をしたいのか】
セレクトボックスでメニューをセレクトし､そこから各リンクへと飛ばしたいのですが､どうもできません｡
セレクトボックスのタグ又 決定(送信)ボタンのタグはこのサイトで分かったのですが､リンクへと飛ばすためのタグがどれであり､またどこにつけるのかがわかりません｡
どなたか教えてくださいませんでしょうか･･
1   名前： JAB ： 2007/01/24（水） 02:36  ID:L/ETXN0t sub-gm
セレクトボックスの値を求めてlocationで転送する。

↓サンプル

<script type="text/javascript"><!--
function jamp(){location.href=document.linkform.manu.value;}
//--></script>
<form name="linkform">
<select name="manu">
<option value="http://www.google.co.jp/">Google
<option value="http://www.yahoo.co.jp/">Yahoo
<option value="http://www.infoseek.co.jp/">Infoseek
</select>
<input type="button" value="Go" onclick="jamp()">
</form>
2   名前： 匿名 ： 2007/01/24（水） 02:36  ID:Rt.j/.AI sub-kJ
<script type="text/javascript">

document.write ('<form action="#">'
  + '<p>'
  + '<select name="menu">'
  + '<option value="http://www.google.co.jp/">Google<\/option>'
  + '<option value="http://www.yahoo.co.jp/">Yahoo<\/option>'
  + '<option value="http://www.infoseek.co.jp/">Infoseek<\/option>'
  + '<\/select>'
  + '<input type="button" value="Go"'
  + '       onclick="location.href = this.form.elements[\'menu\'].value; ">'
  + '<\/p>'
  + '<\/form>');

</script>

<noscript>
<ul>
<li><a href="http://www.google.co.jp/">Google</a></li>
<li><a href="http://www.yahoo.co.jp/">Yahoo</a></li>
<li><a href="http://www.infoseek.co.jp/">Infoseek</a></li>
</ul>
</noscript>
3   名前： 芽亞 ： 2007/01/24（水） 02:36  ID:pFJAz5SF sub-t1
JABさん､匿名さん､どうもありがとうございました｡
どちらも試みたのですが､JABさんが教えてくださったタグを使用することにしました<(_ _)>

JABさんへ.

>>locationで転送する。
とありましたが､{location.href=document.linkform.manu.value;}の=のあとに飛ばしたいURLを打ち込んでいけばよろしいのですか･･？汗
面倒かと思いますが､お答えよろしくお願いします｡
4   名前： 匿名 ： 2007/01/24（水） 02:36  ID:Rt.j/.AI sub-kJ
>>3
まあどうでも良いんだが、>>1 だとスクリプト無効環境でリンクを辿れなくなるから、>>2 で対処しておいたんだ。タグではなくスクリプトを使っているわけだから。

むしろ、>>2 は最低限の記述だと思ってくれ。
5   名前： JAB ： 2007/01/24（水） 02:36  ID:L/ETXN0t sub-gm
リンク項目を増やすのには、
<option value="http://www.google.co.jp/">Google

の部分をコピーして、
<option value="アドレス">表示するテキスト
を追加してください。
<例>

<option value="http://www.google.co.jp/">Google
<option value="http://www.yahoo.co.jp/">Yahoo
<option value="http://www.infoseek.co.jp/">Infoseek
<option value="アドレス">表示するテキスト
<option value="アドレス">表示するテキスト

もちろん、既在のGoogleやYahooへのリンクは不要ならば削除してください。

6   名前： 芽亞 ： 2007/01/24（水） 02:36  ID:pFJAz5SF sub-t1
匿名さん､詳しく説明ありがとうございました｡

JABさん､教えてくださってありがとうございました｡
リンク項目追加はようやく分かったのですが､ﾘﾝｸ先に飛ばないという非常事態が;;

<FORM METHOD="POST" ACTION="***.cgi" NAME="form1" onSubmit="return check()">
<SELECT NAME="select1">
<OPTION VALUE="">MANU
<OPTION VALUE="sample1">選択サンプル1
<OPTION VALUE="sample2">選択サンプル2
<OPTION VALUE="sample3">選択サンプル3
</SELECT> <BR> <BR> <INPUT TYPE="submit" VALUE="飛ぶ"> </FORM> </BODY> </HTML>

JABさんが教えてくださったタグのほかに上記のタグで試してみたのですが､***に1つのURL(ﾘﾝｸ先の)を入れてしまうと選択項目のすべて(ここでは選択ｻﾝﾌﾟﾙ1〜3)がそのﾘﾝｸ先に飛んでしまうんです｡｡｡

自分ではどこが間違っているのかわからないので､これもよければ教えてください｡
7   名前： Z ◆XTzyosZXcL ： 2007/01/24（水） 02:36  ID:D13KwVcf sub-Ds
　FORM要素のaction属性はフォームを処理する送信先（フォーム処理エージェント）を指定するためのものです。よって>>5において「***に1つのURL(ﾘﾝｸ先の)を入れてしまうと選択項目のすべて(ここでは選択ｻﾝﾌﾟﾙ1〜3)がそのﾘﾝｸ先に飛んでしまう」のは当然の結果です。

HTML4.01仕様書該当部分：
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#h-17.3
http://www.w3.org/TR/html401/interact/forms.html#h-17.3

仕様書の読み方など：
http://www.kanzaki.com/works/2001/pub/wsd01.html

フォーム要素について：
http://www.kanzaki.com/docs/html/htminfo31.html
http://www.kanzaki.com/docs/html/htminfo32.html
http://www.kanzaki.com/docs/html/htminfo33.html

参考・>>4の補足資料：
http://bakera.jp/html/opinion/zannen1.html

　なお、OPTION要素の終了タグは必須ではありませんが、記述しておいたほうがトラブルにならないと思います。
8   名前： JAB ： 2007/01/24（水） 02:36  ID:w7xNvb9/ sub-gm
簡単言うと、貴方はまったく関係のない事をしています。
何故、変に改造したのか疑問です。
オブジェクトcheck()もありませんし。
改造しなくても問題ないはず。

9   名前： 芽亞 ： 2007/01/24（水） 02:36  ID:pFJAz5SF sub-t1

お返事遅くなりました｡
私の想像だと､ﾄｯﾌﾟﾍﾟｰｼﾞにセレクトﾀｸﾞを貼って､そこで行きたいｶﾃｺﾞﾘを選択し(送信ﾎﾞﾀﾝで)リンク先に飛ぶということなんですが､それは難しいこともしくは不可能なことなのでしょうか･･?
無知で申し訳ありません｡
10   名前： え ： 2007/01/24（水） 02:36  ID:sHmIkfSh sub-Ue
君、本当は>>1も>>2も全然試してないだろ。

無知を謝る必要はないけど
言われた通りにしないのは理解に苦しむ。

本当はCGIを使いたいとか？
11   名前： 芽亞 ： 2007/01/24（水） 02:36  ID:pFJAz5SF sub-t1

どちらも試させていただきました｡

ですが結局どちらのソースも使わずに
<select onchange="location.href = this.options[selectedIndex].value">
<option value="">MENU
<option value="http://***/">
</select>
を試用することにしました｡無知な私には上記のｿｰｽが一番容易でした｡
>>1や>>2は自力で希望する形まで持っていくのが難しかったからです｡

PCでは表示できるのですが､実際には携帯向けのHPで使用しようと考えており､携帯からではｾﾚｸﾄﾎﾞｯｸｽが表示されませんでした｡
なので今は携帯向けのソースを探しているところです｡

ﾄﾋﾟの主題の セレクトボックスでメニューをセレクトし､そこから各リンクへと飛ばしたい は解決いたしました｡
ご迷惑おかけしました｡
12   名前： JAB ： 2007/01/24（水） 02:36  ID:MqlHe6Xi sub-gm
携帯サイトでJavaSciptは使用できないのでは?
私は携帯を所有していないので分かりませんが。
13   名前： Z ◆XTzyosZXcL ： 2007/01/24（水） 02:36  ID:CSqyQR5N sub-Cl
　Scopeという携帯電話用UAではJavascriptにも対応しているそうです。

Scope・仕様：
http://www.programmer.co.jp/Scope/spec.html

Scope・FAQ：
http://www.programmer.co.jp/Scope/faq.html

　その点では下記資料の記述は「過去のもの」と言えるかもしれませんね。

http://www.marguerite.to/Nihongo/HowToMakeYourWeb/Mobile/MobileHTML.html#JAVAScript
14   名前： 芽亞 ： 2007/01/24（水） 02:36  ID:pFJAz5SF sub-t1

Scope見て見ました｡
そのScopeをダウンロードすれば携帯からでも閲覧可能だということは分かったのですが､
これはダウンロードした端末でしか表示不可ということですよね･･?
15   名前： Z ◆XTzyosZXcL ： 2007/01/24（水） 02:36  ID:CSqyQR5N sub-Cl
>>14
　標準搭載されているのでなければそうだと思います（ユーザーでないので分かりませんが）。
＃そもそもPCのWWWブラウザ自体、「標準添付」されるようになったのはかなり最近になってからだったかと・・・

　で、そろそろ元質問と内容が異なってしまってきていますので、続けられる場合は新スレッドを立てるようお願いいたします。
16   名前： Chip ： 2007/01/24（水） 02:36  ID:iXTrKUp6 sub-FV
携帯サイトでそうした事を実現するにはCGIなどのサーバ側で動くスクリプトを用意しないと。
ただ、そういう仕組みを用意すると代替手段がなければ検索エンジンのロボットは拾わないって問題もあるし、だいたいが携帯のブラウザではselectによる選択＞ジャンプはさして便利ではなく、リンクを羅列したページを別に作って普通にリンクしたほうが使いやすかったりする。
少なくとも私が作るならselectを使ってジャンプするような仕組みを携帯サイトに用意する事は絶対にしない。
（月日が経って携帯の標準ブラウザがそれなりに進化したらわからないけど）
一覧へ戻る