- ベストアンサー
テキストボックスへの文字の表示について（文字は可変である）
リストボックスと関連付けさせて、テキストボックスに文字を表示させたいです。 表示のさせ方としては、例えば、リストボックスに５つ（5行）の文字列があります。 実現させたい事は、常にそのページが開いた時はリストボックスの1行目をテキストボックスに表示させたいです。簡単な具体例をあげると、 リストボックスに 1行目に「あ」、 2行目に「い」、 3行目に「う」、 4行目に「え」、 5行目に「お」 とあれば、 テキストボックスに、「あ」と表示。 2行目を選択したら「い」と表示。など・・・。 しかし、リストボックスの文字列の順番は場合により並びが同じではないので、スクリプト言語（VBScript?）を用いないといけないとは思いますが・・・ この例をいうと、ページが開いた時、 1行目に「お」、 2行目に「え」、 3行目に「う」、 4行目に「い」、 5行目に「あ」 とあれば、 テキストボックスに、「お」と表示してほしい。 この説明でご理解いただければ幸いです。 よろしくお願い致します。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
>文字列を次のページに引継ぎたい 普通、こう言うのは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"> <!-- function init() { var paraName="ANS";//前のフォームエレメントの名前 var loc=location.href+"&"; //切り出し易くするために最後に＆を付ける var qPos=loc.indexOf("?"); //？の位置を調べる if(qPos == -1){ return; //？が無い時なにもしない } loc=loc.substr(qPos, loc.length - qPos); var xPos=loc.indexOf(paraName+"="); if(xPos == -1){ return; //無い時なにもしない } xPos=xPos + (paraName+"=").length; var andPos=loc.indexOf("&",xPos); var v=loc.substr(xPos, andPos-xPos); document.FORM2.SELECT_VALUE.value=decodeURI(decodeURI(v)); } //--> </script> </head> <body onload="init()"> <form name="FORM2"> 前のページで選ばれたリストの値： <input name="SELECT_VALUE" type="text" value="" size="10"> </form> </body> </html> ------------------------------ 日本語を引き継ぐのでなければもっと簡単（encode,decodeがいらない）
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<!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>
- siteuma
- ベストアンサー率28% (77/271)
JavascriptでもVBScriptでも同じようなことは可能です。 onLoad時のイベントで、リスト１行目の内容をテキストボックスのvalueに入れます。 下記はJavaScriptでの例です。 ---------------------------------- <html> <head> <script type="text/javascript"> <!-- function select_value(){ document.frm.txtbox.value = document.frm.lstbox.options(0).text; } //--> </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> ---------------------------------- これでやりたいことが実現できていると良いのですが。
補足
ありがとうございました。 大変参考になりました。 もうひとつお願いがあるのですが、テキストボックスにある文字列を次のページへ渡す方法を教えていただけないでしょうか。 例えば、リストボックスで「う」を選択すると、テキストボックスには「う」の文字列が表示され、「う」の文字列を次のページに引継ぎたいのです。 よろしくお願い致します。
補足
ありがとうございました。 大変参考になりました。 もうひとつお願いがあるのですが、テキストボックスにある文字列を次のページへ渡す方法を教えていただけないでしょうか。 例えば、リストボックスで「う」を選択すると、テキストボックスには「う」の文字列が表示され、「う」の文字列を次のページに引継ぎたいのです。 よろしくお願い致します。