セレクトメニューで選んだ値を同じページの別の場所へ表示する方法

解決済

質問者：take2003
質問日時：2003/12/11 14:36
回答数：2件

セレクトメニューで選んだ値を同じ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件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： lead1976
回答日時：2003/12/11 18:21

その目的のセル内に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を設定し、初期値として設定されている単位の「円」をこちらも初期値として表示させるようにしておき、またテキストボックスの境界線をスタイルシートで表示させないように指定しています。スタイルシートが思惑通りに解釈されていれば、見た目はプレーンテキストのようになると思います。

これでいかがでしょう。こちらの方法であれば、古いブラウザでも一応表示されると思います(スタイルシートが無視される可能性はありますが)。
参考まで。

- 0
- 件

通報する

この回答へのお礼

早速試してみました。
出来ました！！
凄く悩んでいたので解決できてよかったです。
ありがとうございました！

通報する

お礼日時：2003/12/12 09:02

No.1

回答者： nuruhho44
回答日時：2003/12/11 17:11

ご質問は「<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>

以上の部分を差し替えてやってみてください。

ただし、この命令はＮＮ４などの古いブラウザには無効です。