どなたか教えてください。変な質問の仕方で申し訳ありません。 a1,b1,c1 a2,b2,c2 a3,b3,c3 これはhoge1をセレクトするとa1,b1,c1となりますが、これをhoge1をセレクトするとinput hoge2、input hoge3、が連動して値b1,c1を表すような事をしたいのですが。（下記） a1 をセレクトすると value値に=b1が入る value値に=c1が入るどうすれば動くのか分かりません初心者なので具体的に教えていただければ幸いです。何か簡単な方法はないでしょうか？どうぞよろしくお願い致します。

No1様の回答と似たようなもんですが、ご質問の通りに… （全角空白は半角に） sample a1,b1,c1 a2,b2,c2 a3,b3,c3

select boxとinput valuの連動

解決済

質問者：tansansooda
質問日時：2011/02/10 10:50
回答数：3件

どなたか教えてください。
変な質問の仕方で申し訳ありません。
<select>
<option value="hoge1">a1,b1,c1</option>
<option value="hoge2">a2,b2,c2</option>
<option value="hoge2">a3,b3,c3</option>
</select>
これはhoge1をセレクトするとa1,b1,c1となりますが、
これをhoge1をセレクトするとinput hoge2、input hoge3、が連動して
値b1,c1を表すような事をしたいのですが。（下記）

<select><option value="hoge1">a1</option></select>をセレクトすると
<input type="text" name="hoge2" >value値に=b1が入る
<input type="text" name="hoge3" > value値に=c1が入る

どうすれば動くのか分かりません
初心者なので具体的に教えていただければ幸いです。
何か簡単な方法はないでしょうか？
どうぞよろしくお願い致します。

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3ベストアンサー

回答者： fujillin
回答日時：2011/02/14 20:45

#2です。

#2のスクリプトでは、セレクトボックスの選択された文字列を読んで他のinput要素の値を書き込んでいます。

＞select　boxにはa1のみしか出さないようにするのはどうしたらよいのでしょうか？

1）値をa1に固定してしまって良いのなら、「selectのoptionをa1のみにしてししまう」
　ことで可能ですが、他の値を選択し直すことはできなくなります。
　（この場合はセレクトを消して、inputに置き換えてしまった方が良いかも…）
2）他を選択できるように、optionを追加してa1表示のみのものを追加して表示することも
　可能ですが、選択し直してこのa1のみのものを選択するとb1、c1にあたる値が無いので
　他の部分が表示されないので整合性がとれなくなるのでは？
3）表示を変えるのではなく、別に全部のセットをスクリプト側で記憶しておくのなら#1様
　がご提示の方法で可能です。
4)現在どのように使用しているのか不明ですが、セレクトの表示を最初からa1、a2、a3だけ
　にして、optionのvalue値に他の値を持たせておいてもよいのなら、以下のようにほぼ同じ
　要領で可能です。

他にもいろいろとやりようはあると思いますが、どのような仕様を求めていらっしゃるのかは、質問文から読み取れる範囲でしかわかりませんので・・・

◇ 4）の例

<script type="text/javascript">

</script>

<form name="form1" action="" method="">
<select name="fuga1" onchange="change(this)">
<option value="" selected></option>
<option value="b1,c1">a1</option>
<option value="b2,c2">a2</option>
<option value="b3,c3">a3</option>
</select>

<input type="text" name="fuga2">
<input type="text" name="fuga3">
</form>

- 0
- 件

通報する

この回答へのお礼

fujillinさま
ご回答ありがとうございます。
◇ 4）の例で私が意図した通りです！素晴らしいです。
こんなに分かって頂けて大変感謝致します。このようにやりたくて昨日一日、自分でも頂いた式を色々ググッたりして変えてみたりしたのですが、
どこをどう変えたら良いのか分かりませんでした。
ご親切に丁寧に教えていただいて本当にありがとうございます。
助かりました。
又何かありましたらどうぞよろしくお願い致します。

通報する

お礼日時：2011/02/15 08:42

No.2

回答者： fujillin
回答日時：2011/02/10 17:46

No1様の回答と似たようなもんですが、ご質問の通りに…

（全角空白は半角に）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">

</script>
</head>

<body>
<form name="form1" action="" method="">
<select name="fuga1" onchange="change(this)">
<option value="hoge0" selected></option>
<option value="hoge1">a1,b1,c1</option>
<option value="hoge2">a2,b2,c2</option>
<option value="hoge2">a3,b3,c3</option>
</select>

<input type="text" name="fuga2">
<input type="text" name="fuga3">
</form>

</body>
</html>

この回答への補足

fujillinさまご回答ありがとうございます。
返信が遅くなりまして申し訳ありません。
動き的には本当に意図した通りなんですが、
大変おしいのですが、select　boxにa1,b1,c1と表示されてしまいます。
select　boxにはa1のみしか出さないようにするのはどうしたらよいのでしょうか？
自分で色々試して見ましたがなかなかできませんでした。
尚、select　box　a1には３文字数しか入りませんので
select　box　a1の表示文字数の制限等でも構わないのですが。
回答等お持ちでしたら是非またよろしくお願い致します。

補足日時：2011/02/14 10:35

通報する

- 0
- 件

通報する

No.1

回答者： duron
回答日時：2011/02/10 14:29

他の方法もあると思いますがとりあえず

・挿入する値は配列で持っておく
・selectの値が変更された際に選択肢に該当する配列の値を
入力エリアにセットする。

の様な感じでどうでしょうか？

<html>
<head>
<title>select</title>
<script type="text/javascript">

</script>
</head>
<body onload="changeselect();">
<form name="selectform">
<select name="select1" onchange="changeselect();">
<option value="hoge0"></option>
<option value="hoge1">a1</option>
<option value="hoge2">a2</option>
<option value="hoge3">a3</option>
</select>
<input type="text" name="hoge_b" >
<input type="text" name="hoge_c" >
</form>
</body>
</html>

この回答への補足

duronさまご回答ありがとうございます。
返信が遅くなりまして申し訳ありません。
これですと元の配列に手を加えなくてはいけないのでしょうか？
selectには実は90行位ありまして、配列に=を付けてのようにするのはかなり大変なんですが。function changeselect()迄の行は省略できるのでしょうか？
select　boxに　a1 しか出さないようにするのは意図した通りでなんですが。
もし何か他のアイデア等ありましたらまた是非よろしくお願い致します。

補足日時：2011/02/14 10:23

通報する