• ベストアンサー

inputの数値を参照しselectによる選択肢で決められた数値を表示したい

JavaScript の素人なもので連続の質問となってしまいました。 下記のように field1 の値を参照し、 selectでの選択肢毎に決められた数値を field2 に表示したいのですが、 どういったscriptにすれば良いか、どなたかご教示をお願い致します。 ┏━━━━━┓ ┃ 例) 150   ┃(必ず1以上の数字が自動で入るinput="text" name="field1") ┗━━━━━┛ (↓ select) ┏━━━━━━┓  ┏━━━━━┓ ┃ 例) イ     ▼┃  ┃ 例) B    ┃(結果を表示させたいinput="text" name="field2" ) ┗━━━━━━┛  ┗━━━━━┛  │ イ │  │ ロ │  │ ハ │  └──┘         (select での選択肢)        │ イ │ ロ │ ハ │ 二 (field1値) │    │    │    │    1 ~100 │ A │ F  │ J  │ O 101~200 │ B │ G  │ K  │ P 201~300 │ C │ H  │ L  │ Q 301~400 │ D │ I  │ M  │ R 401~500 │ E │ H  │ N  │ S ※実装する際にはA~Sは数値になります。 以下に素人ながらのソースを記します。 <script type="text/javascript"> <!-- function selectarea(text) { var total = document.form1.field1.value; var choise = document.getElementById("area"); document.form1.field2.value = text; } // --> </script> <form action="" name="form1"> <table> <tr><td><input type="text" name="field1" size="30" value="150"></td></tr> <tr><td> <select id="area" onChange="selectarea(this[this.selectedIndex].value)"> <option selected="selected">選択して下さい</option> <option value="イ">イ</option> <option value="ロ">ロ</option> <option value="ハ">ハ</option> <option value="二">二</option> </select> </td></tr> <tr><td><input type="text" name="field2" size="30"></td></tr> </table> </form>

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

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.3

・ 未完成ですが、以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> <!-- var i; var values = [ [1,2,3,4], [101,102,103,104] ]; function selectarea(index) { var total = document.form1.field1.value; if ( total<=100 ) { i=0; } else if ( total<=200 ) { i=1; } else if ( total<=300 ) { i=2; } else if ( total<=400 ) { i=3; } else { i=4; } document.form1.field2.value = values[i][index]; } function resetAll() { document.getElementById("area").selectedIndex = 0; document.form1.field2.value = ""; } // --> </script> </head> <body> <form action="" name="form1"> <table> <tr> <td> <input type="text" name="field1" size="30" value="150" onChange="resetAll()"> </td> </tr> <tr> <td> <select id="area" onChange="selectarea(this[this.selectedIndex].value)"> <option selected="selected"> 選択して下さい </option> <option value="0">イ</option> <option value="1">ロ</option> <option value="2">ハ</option> <option value="3">二</option> </select> </td> </tr> <tr> <td> <input type="text" name="field2" size="30"> </td> </tr> </table> </form> </body> </html>

hide-key
質問者

お礼

auty様、ご厚意有難う御座います。^^ 全てを理解するのは難しい程度の私のスキルですが、 選択肢が増えたりしても対応出来そうな感じがします・・・。 テストしてみてからのお礼では時間がかかってしまいそうなので、 先ずはお礼まで・・・ぺこ <(_ _)> 有難う御座いました。

hide-key
質問者

補足

HIRSYU様、auty様 有難う御座いました。 無事動かす事が出来ました。 お二人のように他の方の質問に答える事ができるように 勉強を重ねたいと思います^^ 有難う御座いました。ぺこ <(_ _)>

その他の回答 (2)

  • HIRSYU
  • ベストアンサー率51% (45/87)
回答No.2

>ANo.1です ANo.1で回答したソースは、0以下だとfield2がクリアするが、501以上だと、field2を変更しないって、中途半端な仕様になってますのでご注意を。

  • HIRSYU
  • ベストアンサー率51% (45/87)
回答No.1

連想配列を使用して、表示したい一覧表を作成した。 表示したい一覧表の行の最大値をキーとした連想配列を作成し、その中身に表示したい列(イロハ)をキーとした連想配列を入れる。 後は比較などをして、目的の値をテキストボックスへ。 -- JavaScript -- var list = { 0 : {"イ":"", "ロ":"", "ハ":"", "ニ":""}, 100 : {"イ":"A", "ロ":"F", "ハ":"J", "ニ":"O"}, 200 : {"イ":"B", "ロ":"G", "ハ":"K", "ニ":"P"}, 300 : {"イ":"C", "ロ":"H", "ハ":"L", "ニ":"Q"}, 400 : {"イ":"D", "ロ":"I", "ハ":"M", "ニ":"R"}, 500 : {"イ":"E", "ロ":"H", "ハ":"N", "ニ":"S"}, }; function selectarea(text) { var total = document.form1.field1.value; if(text.length == 0){ return; } for(key in list){ if(key >= total){ document.form1.field2.value = list[key][text]; break; } } } -- HTML(1行だけ変更) -- <option value="" selected="selected">選択して下さい</option>

hide-key
質問者

お礼

HIRSYU様、ご厚意有難う御座います。^^ scriptの内容を理解するのは難しい程の私ですが、 何となくの理論の流れはイメージ出来ました。 力不足なためテストするまでも時間がかかりそうなので、 先ずはお礼まで・・・ぺこ <(_ _)> 有難う御座いました。。。

関連するQ&A

専門家に質問してみよう