セレクトボックスとテキストボックスの連動について

このQ&Aのポイント
  • セレクトボックスで質問事項を選ぶと、テキストボックスの中に選択した名称が表示される。問題点として、セレクトボックスで質問を2回選ぶと、選んだ2つの結果がテキストボックス内に連続して表示されてしまいます。
  • セレクトボックスとテキストボックスを連動させるためにJavaScriptの関数を使用しています。選択した質問の値をテキストボックスの値に加え、テキストボックスの値をリセットしています。
  • 2回目以降の選択時に前回の処理をクリアして、1つのみの表示にするためには、JavaScriptの関数内でテキストボックスの値を一度クリアする処理を追加する必要があります。この場合、処理の順番や条件分岐を工夫することで問題を解決することができます。
回答を見る
  • ベストアンサー

セレクトボックスとテキストボックスの連動について

セレクトボックスで質問事項を選ぶと、テキストボックスの中に選択した名称が表示される。ということをやりたく下記の様に設定しました。 <script> function hoge(obj){ var f=obj.form; var v=obj.options[obj.selectedIndex].value; var c=f.elements["comment"]; c.value+=v; obj.selectedIndex=0; } </script> <select name="質問事項1" onchange="hoge(this)"> <option value="selected">質問事項を選んでください</option> <option value=“質問1">質問1</option> <option value="質問2">質問2</option> <option value="質問3">質問3</option> </select> <textarea name="comment"></textarea> 現在発生している問題が1点あります。 セレクトボックスで質問を2回選ぶと、選んだ2つの結果がテキストボックス内に連続して表示されます。 例: 1回目 セレクトボックス内 「質問1」を選択 ↓ テキストボックス内 「質問1」が表示 2回目 セレクトボックス内 「質問2」を選択 ↓ テキストボックス内 「質問1質問2」と表示 2回目以降選んだ場合に前回の処理をクリアにして、1つのみ表示させたいと思うのですがどうやればいいのでしょうか。 よろしくお願いします。

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

  • ベストアンサー
回答No.1

c.value+=v 足すからだめ。 c.value = v; 今のままじゃc.valueにどんどん追加するから追加されていく。

rossi46mail
質問者

お礼

ありがとうございます! できました! 本当に助かりました。

関連するQ&A

  • セレクトボックスの連動

    セレクトボックスAを切り替えると、他のセレクトボックスがAと同じになるようなものを作りたいのですが、うまくいきません。 ソースは以下の通りです。 function ChangeSelect() { var index = formA.selectA.selectedIndex; for (i=1,i<formB.selectCnt.value,i++) { if (i == index) { FormB.selectB1.options[index].value ); } } } <form name="formA"> <select name="selectA" onchange="javascript:ChangeSelect()"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> <form name="formB> <input type="hidden" name="selectCnt" value=***> <select name="selectB1"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> 存在するセレクトボックスは全て同じ値が入っています。 formAにはセレクトボックスは1つですが、formBにあるセレクトボックスは0~複数と場合によって異なります。 formBにあるセレクトボックスはselectB1、selectB2、selectB3という感じに最後の数字のみが異なるnameがつくようにしています。 <input type="hidden" name="selectCnt" value=***>のvalueには、ASPで数えたセレクトボックスの数を入れています(セレクトボックスが10個あれば10と入ります) 数が決まっていればFormB.selectB1.options[index].valueを数の分だけ増やせばいいのですが、0の時もあれば10の時もある、という場合にはどういう風に書けばいいのかわかりません。 どのように記述すれば良いのでしょうか。アドバイスお願いします><

  • 親子連動型のselectを設置し、さらにselectedを設定したい。

    以下のソースのように、親子連動型のselectを作成しています。 ですが、特定の値にselectedを設定するところで行き詰っています。 例えば、 dai_komokuのselectedが大項目2で chu_komokuのselectedが中2-3 というようなかたちです。 このような事は可能なのでしょうか? 可能であれば教えていただければ幸いです。 <script type="text/javascript"> <!-- function changelist(){ var num = document.forms["writeform"].dai_komoku.selectedIndex var obj = document.forms["writeform"].chu_komoku.options obj.length = 0 if(num==0){ obj[obj.length]=new Option("----------------",""); } if(num==1){obj[obj.length]=new Option('中1-1','11') obj[obj.length]=new Option('中1-2','12') }else if(num==2){obj[obj.length]=new Option('中2-1','21') obj[obj.length]=new Option('中2-3','23') } if(obj.selectedIndex==-1)obj.selectedIndex=0 if(document.layers){ window.resizeBy(-10,-10) window.resizeBy(10,10) } } //--> </script> <form method="post" action="hoge.php" name="writeform"> 大項目 <select name="dai_komoku" onchange="changelist()"> <option value="" selected>--選択してください--</option> <option value='1'>大項目1</option> <option value='2'>大項目2</option></select> <br> 中項目 <select name="chu_komoku"></select> </form>

  • 動的セレクトボックスのSelectedについて

    以下のように、動的セレクトボックスを作りました。これ自体は問題なく動くのですが、selectedの指定方法がわかりません。例えば、ページ表示に「東京都」と「中央区」を選択している状態にしたいです。よろしくお願いいたします。 <html> <head> <script type="text/javascript"><!-- function SelectOption(parentValue, text, title, value, style) { this.parentValue = parentValue; this.setOption = function() { this.text = text; this.value = value; this.title = title; if(style) { this.style.cssText = style; } }; return this; } function SelectBox(id) { function getObject() { var obj = document.getElementById(id); if(!obj.options && ( (typeof obj.length) == "number") ) { if(obj.length > 0) { obj = obj[0]; } else { obj = null; } } return obj; } var options = []; this.registOption = function(option) { options[options.length] = option; }; var child = null; this.setChild = function(childObj) { child = childObj; }; this.make = function(parentValue) { var obj = getObject(); if(obj) { obj.options.length = 0; var opt = (parentValue != null) ? [] : options; if(parentValue != null) { for(var i = 0; i < options.length; i++) { if( (options[i].parentValue == null) || (options[i].parentValue == parentValue) ) { opt[opt.length] = options[i]; } } } obj.options.length = opt.length; for(var i = 0; i < opt.length; i++) { opt[i].setOption.call(obj.options[i]); } if(child) { child.make(obj.value); } } }; return this; } var box1 = new SelectBox("sb1"); box1.registOption(new SelectOption(null, "都道府県", "", "0", "color:gray;")); box1.registOption(new SelectOption(null, "東京都" , "都道府県", "1")); box1.registOption(new SelectOption(null, "神奈川県", "都道府県", "2")); var box2 = new SelectBox("sb2"); box2.registOption(new SelectOption(null, "区市町村", "", "0", "color:gray;")); box2.registOption(new SelectOption("1" , "千代田区", "区市町村", "1")); box2.registOption(new SelectOption("1" , "中央区" , "区市町村", "2")); box1.setChild(box2); window.onload = function() { box2.make("1"); }; //--></script> </head> <body> <form> <select id="sb1" onchange="box2.make(this.value);"></select> <select id="sb2"></select> </select> </form> </body> </html>

  • select boxとinput valuの連動

    どなたか教えてください。 変な質問の仕方で申し訳ありません。 <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が入る どうすれば動くのか分かりません 初心者なので具体的に教えていただければ幸いです。 何か簡単な方法はないでしょうか? どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • セレクトボックスに"value"と"word"を付け加えたい。

    初めての投稿をさせてもらいます。JavaScript初心者な者で解る方がいらっしゃればご教授のほど宜しくお願いします。 質問させてもらいたい事はこちらのソースに"value"と"word"を付け加えることは出来ますでしょうか? 外部ファイルには /** * 選択肢クラス * @param parentValue 親の値(null:いつでも表示) * @param text 表示テキスト * @param value 値 * @param style CSS(省略可) */ function SelectOption(parentValue, text, value, style) { this.parentValue = parentValue; this.setOption = function() { this.text = text; this.value = value; if(style) { this.style.cssText = style; } }; return this; } /** * セレクトボックスクラス * @param id セレクトボックスID */ function SelectBox(id) { /** * IDに対応オブジェクトを取得 * @return オブジェクトorNULL */ function getObject() { var obj = document.getElementById(id); if(!obj.options && ( (typeof obj.length) == "number") ) { if(obj.length > 0) { obj = obj[0]; } else { obj = null; } } return obj; } // オプションのリスト var options = []; /** * オプション登録 * @param condition 表示条件 */ this.registOption = function(option) { options[options.length] = option; }; // 子のオブジェクト var child = null; /** * 子のオブジェクトを設定する * @param childObj 子のオブジェクト */ this.setChild = function(childObj) { child = childObj; }; /** * オプション反映 * @param parentValue 親の値(null:全部表示) * ※比較に==を使っているのでundefinedもnullと等しく扱われる。 */ this.make = function(parentValue) { var obj = getObject(); if(obj) { // 選択肢削除 obj.options.length = 0; // 表示すべき選択肢抽出 var opt = (parentValue != null) ? [] : options; if(parentValue != null) { for(var i = 0; i < options.length; i++) { if( (options[i].parentValue == null) || (options[i].parentValue == parentValue) ) { opt[opt.length] = options[i]; } } } // 選択肢反映 obj.options.length = opt.length; for(var i = 0; i < opt.length; i++) { opt[i].setOption.call(obj.options[i]); } // 子のオブジェクトにも連鎖反映 if(child) { child.make(obj.value); } } }; return this; } HTMLファイルには <html> <head> <title>セレクトボックス親子関係</title> <script type="text/javascript" src="Select.js" charset="Shift_JIS"></script> <script type="text/javascript"><!-- var box1 = new SelectBox("sb1"); box1.registOption(new SelectOption(null, "都道府県", "0", "color:gray;")); box1.registOption(new SelectOption(null, "東京都" , "1")); box1.registOption(new SelectOption(null, "神奈川県", "2")); var box2 = new SelectBox("sb2"); box2.registOption(new SelectOption(null, "区市町村", "0", "color:gray;")); box2.registOption(new SelectOption("1" , "千代田区", "1")); box2.registOption(new SelectOption("1" , "中央区" , "2")); box2.registOption(new SelectOption("2" , "横浜市" , "3")); box2.registOption(new SelectOption("2" , "川崎市" , "4")); var box3 = new SelectBox("sb3"); box3.registOption(new SelectOption(null, "詳細" , "0", "color:gray;")); box3.registOption(new SelectOption("1" , "一番町" , "1")); box3.registOption(new SelectOption("3" , "みなとみらい", "2")); box1.setChild(box2); box2.setChild(box3); window.onload = function() { box1.make(null); }; //--></script> </head> <body> <form> <select id="sb1" onchange="box2.make(this.value);"></select> <select id="sb2" onchange="box3.make(this.value);"></select> <select id="sb3"></select> </form> </body> </html> となっております。

  • セレクトボックス連動

    過去の質問にありましたソースを参考にセレクトボックスの 連動タイプをphpを絡めて作っています。 DBから取出した menua に入る値を初期値に設定したいのですが うまくいきません。 menua には AAA、BBB、CCCが入ります。 初期値を変えるにはどのようにすればいいのでしょうか。 また、menua以外にもmenubの初期値も変える事が出来るのでしょうか。 以下ソースになります。 <? $menua = "BBB"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script type="text/javascript"> <!-- data = [ ["AAA", {key:"A01",value:101}, {key:"A02",value:102}, {key:"A03",value:103}], ["BBB", {key:"B01",value:201}, {key:"B02",value:202}, {key:"B03",value:203}], ["CCC", {key:"C01",value:301}, {key:"C02",value:302}, {key:"C03",value:303}] ]; // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.menua.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.menub.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.menub.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="menua" onchange="setSubMenu(this.selectedIndex)"> </select> <select name="menub" > </select> </form> </body> </html>

  • プルダウンからテキストボックスに入力

    プルダウンから選択したものをテキストボックスに表示させています。 <script type="text/javascript"> function displayText(thatOption, textId) { var text1 = document.getElementById(textId); text1.value = thatOption.title; } </script> <SELECT onchange="displayText(this.options[this.selectedIndex], 'text1');"> <option value="1" title=""></option>  #空欄 <option value="2" title="A">A</option> #大文字 <option value="3" title="a">a</option> #小文字 </SELECT> <input type="text" value="" id="text1"> プルダウンを2個や5個など複数用意して、それぞれ選択したものをテキストボックス1行に 続けて表示させたいです。 上記のプルダウンをA~Eまで用意した場合、[A b C D e]と表示させたり、Cは選ばず 空欄を選択した場合は、[A b D e]と表示させる事は可能でしょうか? また、テキストボックスにvalue="ZZ"と初期表示を入れて、その後に 続くように表示させたいです。 [ZZ A b C D e]とする事は可能でしょうか?

  • リストボックスを連動させて・・・その2

    直前の質問で下記の回答をいただいたものです。 質問では2つのリストボックスを連動させたサンプルの回答をいただきましたが、ひょっとして、リストボックスの個数が何個でも対応させることはできないでしょうか。つまり、リストボックスのnameなどをscript部分に記さずに・・。 ここまでサンプルをもらっても改造できないので質問。 (^^; ■JavaScript <SCRIPT language=JavaScript> <!-- strBase = "test.cgi?hinmei=denwa "; strS1 = "&s1="; strS2 = "&s2="; function set(){  strS1b = strS1  strS2b = strS2   if (document.form.s1.options[document.form.s1.selectedIndex].value)   strS1b += document.form.s1.options[document.form.s1.selectedIndex].value;  if (document.form.s2.options[document.form.s2.selectedIndex].value)   strS2b += document.form.s2.options[document.form.s2.selectedIndex].value;  strURL = strBase + strS1b + strS2b;  document.form.text.value = strURL; } //--> </SCRIPT> ■フォーム <FORM NAME="form"> <select name="s1" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="big">big</OPTION> <OPTION VALUE="small">small</OPTION> </SELECT> <select name="s2" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="red">red</OPTION> <OPTION VALUE="white">white</OPTION> </SELECT> <INPUT TYPE="text" SIZE=50 NAME="text"> </FORM>

  • 2つのセレクトボックスを連動させたい

    2つのセレクトボックスを連動させて、 片方の選択を変更すると、もう一方の選択できる範囲が限定されるようにしたい。 下記のようなソースでセレクトボックスを2つ表示させています。 jQueryを使用しています。 それぞれ「開始年」「終了年」という意味合いで、 取得する値から、「年の範囲」を決定するものです。「option」の「value」には、西暦の4桁の数字が入るようにしています。 そこで、「開始年」選択を変更させたときに、「終了年」のセレクトが開始年よりも古い年を選択できないように連動させたいのですが、何かいい方法はないでしょうか。 ※「送信」ボタンをクリックした際に、警告文を表示するのではなく、 2つのセレクトを連動される形で実現させたいと考えております。 ↓↓【記述コード】---------------------------------------------- 開始年:<select name="year_start" id="feas_1_1"></select> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript"> //現在の年数オブジェクトを4桁で生成 var time = new Date(); var year = time.getFullYear(); var init_year = 1955; //1970年まで表示 for (var i = init_year; i <= year; i++) { if(i < 1989){ no = 1925; era = '昭和 '; }else{ no = 1988; era = '平成 '; } var s = i - no; if(s == 1){ s = '元'; } $('#feas_1_1').append('<option value="' + i + '">' + era + s +'年( '+ i+ '年)</option>'); } </script> 終了年:<select name="year_end" id="feas_1_2"></select> <script type="text/javascript"> //現在の年数オブジェクトを4桁で生成 var time = new Date(); var year = time.getFullYear(); var init_year = 1955; //1970年まで表示 for (var i = year; i >= init_year; i--) { if(i < 1989){ no = 1925; era = '昭和 '; }else{ no = 1988; era = '平成 '; } var s = i - no; if(s == 1){ s = '元'; } $('#feas_1_2').append('<option value="' + i + '">' + era + s +'年( '+ i + '年)</option>'); } </script>

  • 連動するセレクトボックスの内容を増やしたい

    お世話になります。 現在JavaScriptで以下のサンプルのような連動セレクトボックスを作っているのですが、親と子のセレクト項目を増やすやり方がわからず困っています。 http://enjoyjob.blog116.fc2.com/blog-entry-221.html サンプルでは親と子のセレクトボックスが3つなのですが、 7つの親と子のセレクトボックスを作りたいと思っています。 JavaScriptのどの部分を変えればいいのかどうかご教授お願いいたします。 <script type="text/javascript"> var parentArray = new Array('東京都','神奈川県','静岡県'); ////親セレクトボックスを配列から書き出し function autoOptions(){ var parent=parentArray.length; var selectNumber = document.getElementsByTagName("select").length; for(var j=0;j<=selectNumber/2-1;j++){ idName='parent_'+j; document.getElementById(idName).length=parent+1; for(var i=0;i<parent;i++){ document.getElementById(idName).options[i+1].text= parentArray[i]; } } } ////連動セレクトボックス function selectBox(n){ var idParent='parent_'+n; var idChild='child_'+n; if(document.getElementById(idParent).selectedIndex==0){ document.getElementById(idChild).length=1; document.getElementById(idChild).selectedIndex=0; } else { document.getElementById(idChild).selectedIndex=0; document.getElementById(idChild).length=1; var child = childArray[document.getElementById(idParent).selectedIndex-1]; document.getElementById(idChild).length=child.length+1; for(var i=0;i < child.length;i++){ document.getElementById(idChild).options[i+1].text= child[i]; } } } ////子セレクトボックスの配列 var childArray = new Array(); childArray[0]=new Array("渋谷区","品川区","港区","新宿区"); childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市"); childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市"); </script>