- ベストアンサー
セレクトメニューで選んだ値を同じページの別の場所へ表示する方法
セレクトメニューで選んだ値を同じHTML内の別の箇所へ表示させる方法がわかりません。 どなたか分かる方が居ましたら、回答お願い致します。 下記のような例です。 <BODY> <FORM method="post" Name="Application" action="bin/regist.cgi" onSubmit="return Check()"> <input type="hidden" name="subject" value="申し込み"><input type="hidden" name="nexthtm" value="index.html"> <CENTER> <SELECT name="RATE" size="1" tabindex="1"> <OPTION>▼選択</OPTION> <OPTION value="ドル">ドル</OPTION> <OPTION value="円" selected>円</OPTION> </SELECT><BR><BR> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD width="90" align="center"><INPUT size="10" type="text" name="PRICE" tabindex="6" onChange="CheckTxt1(this.value);"></TD> <TD></TD> <TD>ここに選んだ単位を表示したい</TD> </TR> </TBODY> </TABLE> <BR> <TABLE border="0"> <TR><TD colspan="3" align="center"> <INPUT type="submit" value=" 送 信 " tabindex="45"> <INPUT type="reset" value=" リセット " tabindex="46"> <BR> </TD></TR> </TABLE> </CENTER> </FORM> </BODY>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その目的のセル内にinput要素でテキストボックスを置いておいて、そこに単位のデータを書き込むようにすれば良いのではないでしょうか。 すべて同じform要素内に含まれるとしたら、下記のようなものではいかがでしょう。 <select name="rate" size="1" tabindex="1" onChange="this.form.unit.value=this.options[selectedIndex].text"> <option>▼選択</option> <option value="ドル">ドル</option> <option value="円" selected>円</option> </select> select要素には、onChangeのイベントハンドラを仕込みます。 セレクトメニューが選択・変更されると、このフォーム内のunitという名前を持つ部品の値として、このセレクトメニューの選択されたオプション要素がもつテキスト(value値ではなく、optionタグに囲まれるテキストの方を参照させています)を渡します。 テキストではなく、value値を渡したい時は、「this.options[selectedIndex].text」のtextをvalueに書き換えて、「this.options[selectedIndex].value」としてください。 単位を表示させたい部分には、 <input name="unit" style="border: none;" value="円" readonly> 以上のソースを追加しておきます。 これはテキストボックスになっていますが、書き換えられないようにreadonlyを設定し、初期値として設定されている単位の「円」をこちらも初期値として表示させるようにしておき、またテキストボックスの境界線をスタイルシートで表示させないように指定しています。 スタイルシートが思惑通りに解釈されていれば、見た目はプレーンテキストのようになると思います。 これでいかがでしょう。 こちらの方法であれば、古いブラウザでも一応表示されると思います(スタイルシートが無視される可能性はありますが)。 参考まで。
その他の回答 (1)
- nuruhho44
- ベストアンサー率57% (38/66)
ご質問は「<TD>ここに選んだ単位を表示したい</TD>」というセルの内容の書き換えということでしょうか？ その場合でしたら、一部抜粋ですが、 <SELECT name="RATE" size="1" tabindex="1" onChange="document.getElementById('AA').innerHTML=document.Application.RATE.value;"> <OPTION>▼選択</OPTION> <OPTION value="ドル">ドル</OPTION> <OPTION value="円">円</OPTION> </SELECT><BR><BR> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD width="90" align="center"><INPUT size="10" type="text" name="PRICE" tabindex="6"></TD> <TD></TD> <TD id="AA">ここに選んだ単位を表示したい</TD> 以上の部分を差し替えてやってみてください。 ただし、この命令はＮＮ４などの古いブラウザには無効です。
お礼
ありがとうございました。 とても助かりました！！
お礼
早速試してみました。 出来ました！！ 凄く悩んでいたので解決できてよかったです。 ありがとうございました！