• ベストアンサー

テキスト入力後に選択項目を変更する

ＡＳＰでテキスト項目と選択項目（プルダウン）項目の２つがあり、相互に入力内容を反映してもう一方の値を変更するプログラムを作りたいのですが、方法がわかりません。 例） <script language="javaScript"> <!-- function pfncInpChg(){ 　var frm = document.formas[0]; 　▲▲▲▲▲▲▲▲▲▲ } function pfncSelChg(){ 　var frm = document.formas[0]; 　frm.inptxt.value = frm.inpSel.options[frm.inpSel.selectedIndex].value; } //--> </script> <input type=text name=inpTxt onChange="pfncInpChg()"> <select name=inpSel onChange="pfncSelChg()"> 　<option value="01">月</option> 　<option value="02">火</option> 　<option value="03">水</option> 　<option value="04">木</option> 　<option value="05">金</option> </select> 選択項目を変更した際にテキスト項目に設定することは出来ます。 逆にテキスト項目に値を入力した時の選択項目のOPTIONを変更する方法がわかりません。 不明な点は▲～▲の部分です。 focus()やselectedではないのは試してみて判りました。 また、表示段階で選択する場合にはOPTIONにselectedを記述する事もわかります。 動的に変更する方法があれば教えていただきたいです。

  • HTML
  • 回答数5
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.5

#1です。 >selectedIndexは参照のみではないのでしょうか？ >値を設定しようとしたらエラーになったのですが．．． 値の設定の仕方がまちがっていたのだと思いますが・・・ こんな感じでエラーはでませんよね？ <script language="javaScript"> function pfncInpChg(obj){ var s=obj.form.inpSel; for (var i=0;i<s.length;i++){ if(s[i].value==obj.value){ s.selectedIndex=i; break; } } } function pfncSelChg(obj){ 　obj.form.inpTxt.value = obj.value; } </script> <form> <input type=text name=inpTxt onChange="pfncInpChg(this)"> <select name=inpSel onChange="pfncSelChg(this)"> 　<option value="01">月</option> 　<option value="02">火</option> 　<option value="03">水</option> 　<option value="04">木</option> 　<option value="05">金</option> </select> </form>

rukaandkaito
質問者

お礼

やはり『selectedIndex』を設定するやり方が妥当なようですね。 勘違いしていたようです。ｍ(＿ ＿)ｍ 上手く出来ました。有難うございました(^^A;)

その他の回答 (4)

noname#30818
noname#30818
回答No.4

<script language="javaScript"> <!-- function test(f){ var form = document.forms[0]; var input = form.elements[0]; var select = form.elements[1]; if(f == input){ for(var i = 0;i < select.length;i++){ if(select[i].value == input.value){ //if(select[i].text == input.value){ select.selectedIndex = i; break; } } }else if(f == select){ input.value = select.value; //input.value = select.text; } } //--> </script> </head> <body> <form> <input type=text onkeyup="test(this)"> <select onChange="test(this)"> 　<option value="01">月</option> 　<option value="02">火</option> 　<option value="03">水</option> 　<option value="04">木</option> 　<option value="05">金</option> </select> </form>

rukaandkaito
質問者

お礼

有難うございます。 みなさんやはり[onKeyUp]を使うんですね！ 今回初めて知りました＞＜

  • is_may
  • ベストアンサー率65% (58/89)
回答No.3

No.2の者です。 テキストボックスに入力した内容がセレクトボックスに存在する場合、その項目（<option>）を選択した状態にするということでしょうか。 そうする場合は以下のような感じになります。 <script language="javaScript"> <!-- function pfncInpChg(){ 　var frm = document.forms[0]; for(i=0;i<frm.inpSel.length;i++){ if(frm.inpSel.options[i].value==frm.inpTxt.value){//<option>の値で評価する場合(01,02・・) //if(frm.inpSel.options[i].text==frm.inpTxt.value){ <option>のラベルで評価する場合(月,火・・) frm.inpSel.options[i].selected=true; } } } function pfncSelChg(){ 　var frm = document.forms[0]; 　frm.inpTxt.value = frm.inpSel.options[frm.inpSel.selectedIndex].value; } //--> </script> <form><input type="text" name="inpTxt" onkeyup="pfncInpChg()"> <select name="inpSel" onchange="pfncSelChg()"> <option value="01">月 </option> <option value="02">火 </option> <option value="03">水 </option> <option value="04">木 </option> <option value="05">金 </option> </select></form> これでもまだあまり自信ないですが・・。 補足で、<input type="text">のイベントハンドラは「onkeyup=""」が適切かと思います。

rukaandkaito
質問者

お礼

ありがとうございました。 色々試した結果上手く行きました。 onkeyupは使った事がないですねぇ．．． 今度試してみます＾＾

  • is_may
  • ベストアンサー率65% (58/89)
回答No.2

こういうことですか？ <script language="javaScript"> <!-- function pfncInpChg(){ 　var frm = document.forms[0]; frm.inpSel.options[frm.inpSel.selectedIndex].value=frm.inpTxt.value; } function pfncSelChg(){ 　var frm = document.forms[0]; 　frm.inpTxt.value = frm.inpSel.options[frm.inpSel.selectedIndex].value; } //--> </script> <form><input type="text" name="inpTxt" onchange="pfncInpChg()"> <select name="inpSel" onchange="pfncSelChg()"> <option value="01">月 </option> <option value="02">火 </option> <option value="03">水 </option> <option value="04">木 </option> <option value="05">金 </option> </select></form> 質問の意味を読み違えているかもしれないので自信ないですけど・・。

rukaandkaito
質問者

補足

どうでしょう？この回答の例だとvalueに値を設定しているため、その内容が上書きされるのでは？ 例えば現在水曜日が選択されていて、テキストに『01』と入力したとします。 その場合にOPTIONのVALUE値が『01』になると <option value="01">月 </option> <option value="02">火 </option> <option value="01">水 </option> <option value="04">木 </option> <option value="05">金 </option> ということにはならないですか？ 説明が不足していて申し訳ありません。 『SELECT項目の選択のみ切り替える』といった表現で伝わるでしょうか？

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

例えば、なんと言うデータを入力するとどの項目が選ばれる仕組みなんでしょう？ 手動入力のデータからselectデータを選ぶとなるとかなりあいまいに なると思いますので・・・。 一応、イメージとしてはforでselectのデータをなめて、合致したら その項目のindexをそのselectのselectedIndexにあてる・・・ とかそんな感じでしょうか

rukaandkaito
質問者

補足

そうですね！説明不足でした＞＜ selectのvalue値(つまり『01』～『05』)を入力し、選択項目を変更する。 あとselectedIndexは参照のみではないのでしょうか？ 値を設定しようとしたらエラーになったのですが．．．

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • セレクトボックスの項目ごとにテキストボックスの数値を参照するには??

    初心者なのにjavascriptで作ろうとしているのが 悪いのですが、完全に煮詰まっています。 助けてください。 カロリー計算なんですが、朝食・昼食など食事毎に セレクトボックスの食品項目を選択していきます。 (食品項目は、本来は数十項目あります) 次に選択された項目のグラムをテキストボックスで入力します。 そして、それを食品毎にカロリー計算して合計のカロリーを表示します。 answer=(A*0.1)+(B*0.2)+(C*0.3)+(D*0.4) が、カロリー=(ご飯*0.1)+(肉*0.2)+(魚*0.3)+(牛乳*0.4)といった感じです。 セレクトボックスのオプション項目の食品は、朝食・昼食問わず、同一です。 食品1・2は選択されない場合もあります。 もっと簡単に作れる入力書式などの変更も考えましたが、 諸事情により、この方式の入力・結果表示が必要なんです。 なにぶんボランティアサークルで予算も何もなくHP作成を外部に 依頼するのも不可能です。 少し出来る人が作っている程度です。 他に頼る人もいないので、出来なければ諦めざるえない状況なんで 今、本を読みながら独学で作っています。 どうかお助けください。 厚かましいですが、よろしくお願いします。 <HEAD> <SCRIPT language="JavaScript"> function calc(){ var A = var B = var C = var D = var E = document.f1.answer.innerText = (A*0.1)+(B*0.2)+(C*0.3)+(D*0.4); } window.onload=calc; </SCRIPT> </HEAD> <BODY> <form id="f1"> 計算結果の計算式<BR> 【カロリー(answer)=(A*0.1)+(B*0.2)+(C*0.3)+(D*0.4)】<BR> カロリー<INPUT size="20" type="text" name="answer"><BR> <BR> 朝食<BR> 食品1<SELECT name="s11"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT>　左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> 食品2<SELECT name="s12"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT>　左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> <BR> 昼食<BR> 食品1<SELECT name="s21"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT>　左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> 食品2<SELECT name="s22"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT>　左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> 　</FORM> </BODY>

  • プルダウン Or コンボボックスを選択したら、テキストボックスを入力不可にさせる方法　

    フォーム制御として、JavaScriptを使用して、プルダウンよりある項目が選択されたと同時に、あるテキストボックスの入力を不可、またはmaxlengthを0にしたいのですが、思うように出来ません。 maxlengthをvalue等に変更させたら値は変更されたので、 関数としての動きは問題なさそうです。 どなたか、ご教授お願いいたします。 ※現在下記のソースは、list番号を指定していません。 <script language="JavaScript"> <!-- function MM_jumpMenu(){ parent.document.form1.text1.maxlength=0; } //--> </script> <form name="form1" method="post" action=""> <select name="menu1" onChange="MM_jumpMenu()"> <option selected>unnamed1</option> <option>unnamed2</option> </select> <input type="text" name="text1" maxlength="10"> </form>

  • 複数のプルダウンメニューの選択項目を変更するには？

    複数のプルダウンメニューを使ってページリンクをさせています。 その際ページリンクと同時に、他のメニューの選択項目を初期値す方法を教えてください。 No.157334で同じような質問があったので、それを参考に以下のように記述してみましたが、 function reSel(c) { for(i=0; i<9; i++){ var s="document.unit.DDList"; var x=s+i; if(x != c){ x.selectedIndex=0; //ココがうまくいきません。 } } } function Li_0(obj){ parent.res.location.href=obj.options[obj.selectedIndex].value; reSel("document.unit.DDList0"); } (以降 Li_8まで同様) <form name="unit" method="post"> <select name="DDList0" size="1" onChange="Li_0(this)"> <option value="help.html" selected>　</option> <option value="unit_a.html">AAA</option> <option value="unit_b.html">BBB</option> </select> (以降 DDList8まで同様) です。 どうぞよろしくお願いいたします。

  • html onchange

    下記のコードでf002は動きますが、f001が動きません。 scriptで作ったオプションメニューもonChangeが働くようにするには、いかがしたらよろしいでしょうか？ <script language="JavaScript"><!-- function f001(){ if (document.test.s1.value==2) alert("2が入力されました"); } function f002(){ if (document.test.s2.value==2) alert("2が入力されました"); } var i,ht=[]; i=0; ht[i] = '<select onChange="f001()" id="s1" >'; for( var i=1; i<=5;) ht[i] = '<option value='+(i)+(i==1?' selected':'')+'>'+(i++)+'</option>'; ht[i] = '</select>'; document.write('s1 =', ht.join('')); // --></script> <form name="test"> s2 = <select onChange="f002()" id=s2> <option value=1 selected>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> </select> </form>

  • JavaScriptで、SELECTの値で、TEXTを入力可と入力不可

    JavaScriptで、SELECTの値で、TEXTを入力可と入力不可に分けたい。 現在、以下のフォームを作成しています。 <form method="post" action="/" name="formname"> <select name="test[0]" size="1" onchange="selectChange(0)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <select name="test[1]" size="1" onchange="selectChange(1)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <br> <input name="txt[0]" type="text" value="" size="10"> <br> <input name="txt[1]" type="text" value="" size="10"> </form> このフォームで、例えば、selectのtest[0]でvalueの「C」が選択された場合、 txt[0]が入力できないようにしたいと考えています。 また同様に、test[1]でvalueの「C」が選択された場合は、txt[1]が入力出来ないように したいです。 以下のようなJavaScriptを書きましたが、上手く動きません。 function selectChange(value) { var answer = document.formname.elements["test[value]"].selectedIndex; if(answer == "C") { document.formname.elemens["txt[value]"].disabled = false; } else { document.formname.elemens["txt[value]"].disabled = true; } } どなたか教授頂けましたら、幸いです。 よろしくお願いします。

  • セレクトボックスの選択項目を変える

    セレクトボックスの選択項目を変えるには どうすればいいですか？ <FORM action=./ method=post> <SELECT name=server> <OPTION value=2 selected>2</OPTION> <OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION> </SELECT> </FORM> こういうフォーム（FORMやOPTIONにnameがない）で [4]を選択したいです このフォームを書き換えないで(スクリプトでの書き換えなら○) どうにか変えることはできないでしょうか？ IEのみの対応でいいので、お願いします

  • 複数 selectフォームから今回onchangeで変更した項目を知りたい

    phpプログラムで、画面上にある複数のselectフォームを使用してselectフォームの内容が選択されれば、selectフォームの値を取得してデータの 抽出を行い、選択された内容の表示を行なおうと思っています。 onChange='submit()' で選択された内容をpostで受け取って再表示を行い、項目にあったデータを取り出すことは出来てますが、直近に変更された項目が何か（どのselectフォームの内容（年度、組織、社員及び商品の項目）が変更されたのか？）を知りたいのですが、いい方法を教えていただけないでしょうか？ よろしくお願いします。 sample.phpの内容 <?php $nen = $_POST['nend']; $sosi = $_POST['so']; $syin = $_POST['sa']; ?> <html> <body> <form action="sample.php" method="post"> <select name='nend' onChange='submit();'> <option value=2007 selected>2008</option> <option value=2006>2007</option> <option value=2005>2006</option> </select> <select name='so' onChange='submit();'> <option value=0 selected>全社</option> <option value=01 >本社</option> <option value=02 >Ａ支店</option> <option value=03 >Ｂ支店</option> </select> <select name='sa' onChange='submit();'> <option value=0 selected>社員</option> <option value=1 >田中</option> <option value=2 >佐藤</option> <option value=3 >鈴木</option> </select> <select name='sy' onChange='submit();'> <option value=0 selected>商品</option> <option value=1 >Ａ商品</option> <option value=2 >Ｂ商品</option> <option value=3 >Ｃ商品</option> </select> </form> </body> </html>

    • ベストアンサー
    • PHP
  • リンク先にまで色変更されたままにしたいのですが。

    以下のようなソースを入れ背景色を変更できるようにしました。 (フレーム１にこのソースを入れフレーム２を変更できるようにしました。) ですが、色変更してもＨＰ内の別のページに行ってしまうとまた、設定する前の状態に戻ってしまいます。 リンク先まで色変更を保ったままにしたいのですがどうすればいいでしょうか？全然わかりません。知ってる方いましたら教えてくださいお願いします。プログラムをどうすればいいのか教えていただけるとうれしいです。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- function select1_onchange() { var s = select1.options(select1.selectedIndex).value; if (s == ""){return;} parent.frame2.document.bgColor = s; } //--> </SCRIPT> </HEAD> <BODY> <SELECT id=select1 style="WIDTH: 100px" name=select1 LANGUAGE=javascript onchange="return select1_onchange()"> <OPTION value="" selected>色変えます</OPTION> <OPTION value=red>赤</OPTION> <OPTION value=black>黒</OPTION> </SELECT></P> </BODY>

  • 背景色変更

    現在かなり困っています・・・。 フレームでウインドウを上下で区切って上の方のウインドウ内に以下のようなプログラムをいれ、背景色を簡単に変更できるようにしたのですが、これを上のウインドウ内ではなく下のウインドウないの背景を変えたいのですがどうすればいいのでしょうか・・？ つまり、上のウインドウないのリストボックスをいじることで、下の方のウインドウ内の背景色を変更したいのです。 知っている方がいらしたら教えてください。 具体的なプログラムを教えていただけたらうれしいです。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- function select1_onchange() { var s = select1.options(select1.selectedIndex).value; if (s == ""){return;} document.bgColor = s; } //--> </SCRIPT> </HEAD> <BODY> <SELECT id=select1 style="WIDTH: 100px" name=select1 LANGUAGE=javascript onchange="return select1_onchange()"> <OPTION value="" selected>色変えます</OPTION> <OPTION value=red>赤</OPTION> <OPTION value=black>黒</OPTION> </SELECT></P> </BODY>

    • ベストアンサー
    • HTML
  • 入力チェック

    下記の入力チェックのときに「【選択して下さい】」という文字列なら「だめ」と表示したいのですが、項目が多いのでヘッダー部分でdocument.kansou.yubin.valueのようのようにテキストボックスの名称を１個ずつ指定せずに一括でできないでしょうか。イメージとしてはdocument.kansou.form(i).valueみたいな？感じのまとめ処理がしたいのですが。 現在→yubinが「【選択して下さい】」ならダメ jusho1が「【選択して下さい】」ならダメ ・・・・ やりたいこと→どれかのテキストボックスが「【選択して下さい】なら「だめ」 <HTML> <HEAD> <TITLE>入力チェック</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function submitCheck(){ if (document.kansou.yubin.value=="【選択して下さい】"){ alert("だめ"); return false; } else return true; } //--> </SCRIPT> </HEAD> <BODY> <FORM NAME="kansou" ACTION="test.cgi" METHOD="post" ENCTYPE="text/plain" onSubmit="return submitCheck()"> <SELECT NAME="yubin">【選択して下さい】 <OPTION SELECTED>ほげほげ</OPTION></SELECT> <SELECT NAME="jusho">【選択して下さい】 <OPTION SELECTED>ほげほげ</OPTION></SELECT> <SELECT NAME="jusho2">【選択して下さい】 <OPTION SELECTED>ほげほげ</OPTION></SELECT> <INPUT TYPE="submit" VALUE="送　信" onClick="document.kansou.name.value=''"> </CENTER> </FORM> </BODY> </HTML>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する