- ベストアンサー
select boxとinput valuの連動
- select要素とinput要素を連動させる方法について教えてください。
- 初心者のため、具体的な方法を教えていただけると助かります。
- 簡単な方法があるか教えてください。
- tansansooda
- お礼率77% (27/35)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#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"> <!-- function change(sel){ var elm = sel.form.elements; val = sel.value.split(","); elm["fuga2"].value = val[0] || ""; elm["fuga3"].value = val[1] || ""; } //--> </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>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
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"> <!-- function change(sel){ var elm = sel.form.elements, val = sel.options[sel.selectedIndex]; val = val.textContent || val.innerHTML; val = val.split(","); elm["fuga2"].value = val[1] || ""; elm["fuga3"].value = val[2] || ""; } //--> </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の表示文字数の制限等でも構わないのですが。 回答等お持ちでしたら是非またよろしくお願い致します。
- duron
- ベストアンサー率77% (73/94)
他の方法もあると思いますがとりあえず ・挿入する値は配列で持っておく ・selectの値が変更された際に選択肢に該当する配列の値を 入力エリアにセットする。 の様な感じでどうでしょうか？ <html> <head> <title>select</title> <script type="text/javascript"> <!-- b=new Array(); c=new Array(); b["hoge0"]=""; c["hoge0"]=""; b["hoge1"]="b1"; c["hoge1"]="c1"; b["hoge2"]="b2"; c["hoge2"]="c2"; b["hoge3"]="b3"; c["hoge3"]="c3"; function changeselect() { value = document.forms["selectform"].select1.options[document.forms["selectform"].select1.selectedIndex].value; document.forms["selectform"].hoge_b.value = b[value]; document.forms["selectform"].hoge_c.value = c[value]; } --> </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 しか出さないようにするのは意図した通りでなんですが。 もし何か他のアイデア等ありましたらまた是非よろしくお願い致します。
お礼
fujillinさま ご回答ありがとうございます。 ◇ 4）の例で私が意図した通りです！素晴らしいです。 こんなに分かって頂けて大変感謝致します。このようにやりたくて昨日一日、自分でも頂いた式を色々ググッたりして変えてみたりしたのですが、 どこをどう変えたら良いのか分かりませんでした。 ご親切に丁寧に教えていただいて本当にありがとうございます。 助かりました。 又何かありましたらどうぞよろしくお願い致します。