- ベストアンサー
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 │ Ｉ │ 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>
- hide-key
- お礼率85% (6/7)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （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>
その他の回答 (2)
- HIRSYU
- ベストアンサー率51% (45/87)
>ANo.1です ANo.1で回答したソースは、0以下だとfield2がクリアするが、501以上だと、field2を変更しないって、中途半端な仕様になってますのでご注意を。
- HIRSYU
- ベストアンサー率51% (45/87)
連想配列を使用して、表示したい一覧表を作成した。 表示したい一覧表の行の最大値をキーとした連想配列を作成し、その中身に表示したい列（イロハ）をキーとした連想配列を入れる。 後は比較などをして、目的の値をテキストボックスへ。 -- 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>
お礼
HIRSYU様、ご厚意有難う御座います。＾＾ scriptの内容を理解するのは難しい程の私ですが、 何となくの理論の流れはイメージ出来ました。 力不足なためテストするまでも時間がかかりそうなので、 先ずはお礼まで・・・ぺこ <(＿ ＿)> 有難う御座いました。。。
お礼
auty様、ご厚意有難う御座います。＾＾ 全てを理解するのは難しい程度の私のスキルですが、 選択肢が増えたりしても対応出来そうな感じがします・・・。 テストしてみてからのお礼では時間がかかってしまいそうなので、 先ずはお礼まで・・・ぺこ <(＿ ＿)> 有難う御座いました。
補足
HIRSYU様、auty様 有難う御座いました。 無事動かす事が出来ました。 お二人のように他の方の質問に答える事ができるように 勉強を重ねたいと思います＾＾ 有難う御座いました。ぺこ <(＿ ＿)>