プルダウンで同一ページに結果を。

質問

プルダウンでいくつかの項目を作り、選択し、ボタンをクリックするとページを表示する、というのはやり方がわかるのですが、わざわざページを作って表示するほどの内容ではないので、同一ページに空欄の一行ほどのテーブルを作り、選択し、クリックするとそのテーブル内に結果を表示する、ということが出来ないかと考えています。

具体的には、1月生まれ、2月生まれ～12月生まれ、というような項目のプルダウンを作り、選択して、ボタンをクリックすると同一ページの空欄のテーブル内に「うお座」などと表示する、と言う感じです。

教えてください！

回答No.4

wolv · ベストアンサー

回答3で「基本は、……」と書いたので、ちょっとコードを追加したり、応用したものを書いてみました。

<hr>
scriptタグ非対応のブラウザを使ってる人でもそれなりに見られるバージョン
<script type="text/javascript">
/* このページはJavaScriptをonにしたほうが楽しめます。
(JavaScriptをoffにしている人・ブラウザがscriptタグに
対応していない人むけのメッセージ) */
<!--
function change(){
document.myForm["i1"].value=document.myForm["s1"].value
}
//-->
</script>
<FORM NAME="myForm">
<SELECT NAME="s1" onchange='change()'>
<OPTION VALUE="でっかいどー">北海道
<OPTION VALUE="りんごー">青森
<OPTION VALUE="めんこい">岩手
</SELECT>
<input name=i1 type=text size=20 value="???">
</FORM>

<hr>
ボタンを押したときだけ更新するバージョン
<script type="text/javascript">
<!--
function change_2(){
document.myForm_2["i1"].value=document.myForm_2["s1"].value
}
//-->
</script>

<FORM NAME="myForm_2">
<SELECT NAME="s1">
<OPTION VALUE="でっかいどー">北海道
<OPTION VALUE="りんごー">青森
<OPTION VALUE="めんこい">岩手
</SELECT>
<input type=button value="更新" onclick='change_2()'>
<input name=i1 type=text size=20 value="???">
</FORM>

<hr>
ボタンを押したときだけ更新するバージョン。ボタンの「onclick」にJavaScriptのコード直書き
<FORM NAME="myForm3">
<SELECT NAME="s1">
<OPTION VALUE="でっかいどー">北海道
<OPTION VALUE="りんごー">青森
<OPTION VALUE="めんこい">岩手
</SELECT>
<input type=button value="更新" onclick='document.myForm3["i1"].value=document.myForm3["s1"].value'>
<input name=i1 type=text size=20 value="???">
</FORM>

参考URL：

http://tohoho.wakusei.ne.jp/js/index.htm

お礼

まさしく私がやりたかったことをズバリ形にしてくださいました!!

非常に参考になりました！
ありがとうございました～！！

回答No.3

wolv

<script>
function change(){
document.myForm["i1"].value=document.myForm["s1"].value
}
</script>

<FORM NAME="myForm">
<SELECT NAME="s1" onchange='change()'>
<OPTION VALUE="でっかいどー">北海道
<OPTION VALUE="りんごー">青森
<OPTION VALUE="めんこい">岩手
</SELECT>
<input name=i1 type=text size=20 value="???">
</FORM>

基本はこんな感じです。（Internet Explorer 6 で動作確認ずみ）

回答No.2

Dpop

#1 です。

<td><a name="名称">内容</td>

は

<td><a name="名称"></a>内容</td>

または、

<td><a name="名称">内容</a></td>

です。失礼!

お礼

ありがとうございます。
えぇと、ちょっと違った形でつくろうかとやってみているのですが、このようにではできますでしょうか。

おそらくinnnerHTMLの所をうまくやればでてこないかとおもうのですが。
option valueの所に文字を入力して、それを以下のテーブル内に出力したいのです！

<FORM NAME="myForm">
<SELECT NAME="#">
<OPTION VALUE="">北海道
<OPTION VALUE="">青森
<OPTION VALUE="">岩手
<OPTION VALUE="">宮城
<OPTION VALUE="">秋田
<OPTION VALUE="">山形
<OPTION VALUE="">福島
<OPTION VALUE="">茨城
<OPTION VALUE="">栃木
<OPTION VALUE="">群馬
<OPTION VALUE="">埼玉
<OPTION VALUE="">千葉
<OPTION VALUE="">東京
<OPTION VALUE="">神奈川
<OPTION VALUE="">新潟
<OPTION VALUE="">富山
<OPTION VALUE="">石川
<OPTION VALUE="">福井
<OPTION VALUE="">山梨
<OPTION VALUE="">長野
<OPTION VALUE="">岐阜
<OPTION VALUE="">静岡
<OPTION VALUE="">愛知
<OPTION VALUE="">三重
<OPTION VALUE="">滋賀
<OPTION VALUE="">京都
<OPTION VALUE="">大阪
<OPTION VALUE="">兵庫
<OPTION VALUE="">奈良
<OPTION VALUE="">和歌山
<OPTION VALUE="">鳥取
<OPTION VALUE="">島根
<OPTION VALUE="">岡山
<OPTION VALUE="">広島
<OPTION VALUE="">山口
<OPTION VALUE="">徳島
<OPTION VALUE="">香川
<OPTION VALUE="">愛媛
<OPTION VALUE="">高知
<OPTION VALUE="">福岡
<OPTION VALUE="">佐賀
<OPTION VALUE="">長崎
<OPTION VALUE="">熊本
<OPTION VALUE="">大分
<OPTION VALUE="">宮崎
<OPTION VALUE="">鹿児島
<OPTION VALUE="">沖縄

</SELECT>
<INPUT TYPE="button" VALUE="検索" onClick="show.innerHTML=''" onmouseout="show.innerHTML=''">
</FORM>

回答No.1

Dpop

アンカータグに、# と言うオプションがあるのをご存知でしょうか?

URLの最後に #名称 と指定しておくと、移動先ページの <a name="名称"> へ移動する。と言う機能です。

プルダウンメニューで、ジャンプさせる仕組みはお分かりと言う事ですので、その移動先URLのところを、

#名称

のみに差し替えてください。
そして、テーブルの <td> タグの後にでも、

<td><a name="名称">内容</td>

とでもしてください。これを必要な数だけ繰り返せば(もちろん、名称の部分はそれぞれに変えてくださいね。)、ご希望の様な動作になります。

注意ですが、ここでは「名称」と漢字をしようしまたしが、実際には誤動作防止のため、半角アルファベット, 数字で名称にあたる部分を指定して頂ければ良いと思います。