- ベストアンサー
テキスト入力後に選択項目を変更する
ＡＳＰでテキスト項目と選択項目（プルダウン）項目の２つがあり、相互に入力内容を反映してもう一方の値を変更するプログラムを作りたいのですが、方法がわかりません。 例） <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を記述する事もわかります。 動的に変更する方法があれば教えていただきたいです。
- rukaandkaito
- お礼率69% (36/52)
- HTML
- 回答数5
- ありがとう数4
- みんなの回答 （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>
その他の回答 (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>
お礼
有難うございます。 みなさんやはり[onKeyUp]を使うんですね！ 今回初めて知りました＞＜
- is_may
- ベストアンサー率65% (58/89)
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=""」が適切かと思います。
お礼
ありがとうございました。 色々試した結果上手く行きました。 onkeyupは使った事がないですねぇ．．． 今度試してみます＾＾
- is_may
- ベストアンサー率65% (58/89)
こういうことですか？ <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> 質問の意味を読み違えているかもしれないので自信ないですけど・・。
補足
どうでしょう？この回答の例だと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)
例えば、なんと言うデータを入力するとどの項目が選ばれる仕組みなんでしょう？ 手動入力のデータからselectデータを選ぶとなるとかなりあいまいに なると思いますので・・・。 一応、イメージとしてはforでselectのデータをなめて、合致したら その項目のindexをそのselectのselectedIndexにあてる・・・ とかそんな感じでしょうか
補足
そうですね！説明不足でした＞＜ selectのvalue値(つまり『01』～『05』)を入力し、選択項目を変更する。 あとselectedIndexは参照のみではないのでしょうか？ 値を設定しようとしたらエラーになったのですが．．．
お礼
やはり『selectedIndex』を設定するやり方が妥当なようですね。 勘違いしていたようです。ｍ(＿ ＿)ｍ 上手く出来ました。有難うございました(^^A;)