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

解決済

質問者：hide-key
質問日時：2008/05/30 17:08
回答数：3件

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">

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： auty
回答日時：2008/05/30 17:53

・　未完成ですが、以下のコードを参考にしてみてください。

------------------------------------------------------------
<html>
<head>
<script type="text/javascript">

</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>

この回答への補足

HIRSYU様、auty様　有難う御座いました。

無事動かす事が出来ました。
お二人のように他の方の質問に答える事ができるように
勉強を重ねたいと思います＾＾

有難う御座いました。ぺこ <(＿＿)>

補足日時：2008/05/31 11:27

通報する

- 0
- 件

通報する

この回答へのお礼

auty様、ご厚意有難う御座います。＾＾

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

通報する

お礼日時：2008/05/30 18:08

No.2

回答者： HIRSYU
回答日時：2008/05/30 17:49

>ANo.1です

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

- 0
- 件

通報する

No.1

回答者： HIRSYU
回答日時：2008/05/30 17:44

連想配列を使用して、表示したい一覧表を作成した。

表示したい一覧表の行の最大値をキーとした連想配列を作成し、その中身に表示したい列（イロハ）をキーとした連想配列を入れる。

後は比較などをして、目的の値をテキストボックスへ。

-- 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>