テキストボックスへの文字の表示について（文字は可変である）

解決済

質問者：burbe
質問日時：2005/02/07 17:41
回答数：3件

リストボックスと関連付けさせて、テキストボックスに文字を表示させたいです。
表示のさせ方としては、例えば、リストボックスに５つ（5行）の文字列があります。
実現させたい事は、常にそのページが開いた時はリストボックスの1行目をテキストボックスに表示させたいです。簡単な具体例をあげると、
リストボックスに
1行目に「あ」、
2行目に「い」、
3行目に「う」、
4行目に「え」、
5行目に「お」
とあれば、
テキストボックスに、「あ」と表示。
2行目を選択したら「い」と表示。など・・・。
しかし、リストボックスの文字列の順番は場合により並びが同じではないので、スクリプト言語（VBScript?）を用いないといけないとは思いますが・・・
この例をいうと、ページが開いた時、
1行目に「お」、
2行目に「え」、
3行目に「う」、
4行目に「い」、
5行目に「あ」
とあれば、
テキストボックスに、「お」と表示してほしい。

この説明でご理解いただければ幸いです。
よろしくお願い致します。

通報する

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

質問の本文を隠す

回答 (3件)

No.3ベストアンサー

回答者： BLUEPIXY
回答日時：2005/02/07 23:04

>文字列を次のページに引継ぎたい

普通、こう言うのはCGIを使うのだけど、javascriptのみでやってみました。
最初のページ
------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>リストボックスの内容をテキストボックスに表示する</title>
<script type="text/javascript">
function init() {
document.FORM.SELECT_VALUE.value=document.FORM.LIST.options[0].value;
}
function selectValue(f) {
f.SELECT_VALUE.value=f.LIST.value;
}
function convert(f){//決定した値を、変換して、隠し欄に入れる
f.ANS.value=encodeURI(f.SELECT_VALUE.value);//encodeURIを使うのは日本語を渡すため
return true;
}
</script>
</head>
<body onload="init()">
<form name="FORM" action="nextPage.html" method="GET" onsubmit="return convert(this)">
<select name="LIST" onchange="selectValue(this.form)">
<option value="あ">あ</option>
<option value="い">い</option>
<option value="う">う</option>
<option value="え">え</option>
<option value="お">お</option>
</select><br>
<input name="SELECT_VALUE" type="text" value="" size="10"><br>
<input type="submit" value="決定">
<input name="ANS" type="hidden" value="">
</form>
</body>
</html>
------------------------------
次のページ
------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>前のページから値を引き継ぐ</title>
<script type="text/javascript">

</script>
</head>
<body onload="init()">
<form name="FORM2">
前のページで選ばれたリストの値：
<input name="SELECT_VALUE" type="text" value="" size="10">
</form>
</body>
</html>
------------------------------
日本語を引き継ぐのでなければもっと簡単（encode,decodeがいらない）

- 0
- 件

通報する

No.2

回答者： BLUEPIXY
回答日時：2005/02/07 18:21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>リストボックスの内容をテキストボックスに表示する</title>
<script type="text/javascript">
function init() {
document.FORM.SELECT_VALUE.value=document.FORM.LIST.options[0].value;
}
function selectValue(f) {
f.SELECT_VALUE.value=f.LIST.value;
}
</script>
</head>
<body onload="init()">
<form name="FORM">
<select name="LIST" onchange="selectValue(this.form)">
<option value="あ">あ</option>
<option value="い">い</option>
<option value="う">う</option>
<option value="え">え</option>
<option value="お">お</option>
</select><br>
<input name="SELECT_VALUE" type="text" value="" size="10">
</form>
</body>
</html>

この回答への補足

ありがとうございました。
大変参考になりました。
もうひとつお願いがあるのですが、テキストボックスにある文字列を次のページへ渡す方法を教えていただけないでしょうか。
例えば、リストボックスで「う」を選択すると、テキストボックスには「う」の文字列が表示され、「う」の文字列を次のページに引継ぎたいのです。
よろしくお願い致します。

補足日時：2005/02/07 21:25

通報する

- 0
- 件

通報する

No.1

回答者： siteuma
回答日時：2005/02/07 18:06

JavascriptでもVBScriptでも同じようなことは可能です。

onLoad時のイベントで、リスト１行目の内容をテキストボックスのvalueに入れます。
下記はJavaScriptでの例です。
----------------------------------
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body onload="select_value();">
<form name="frm">
<select name="lstbox" size="5" tabindex="0">
<option>あ</option>
<option>い</option>
<option>う</option>
<option>え</option>
<option>お</option>
</select>
<input type="text" name="txtbox" size="20">
</form>
</body>
</html>
----------------------------------
これでやりたいことが実現できていると良いのですが。