- ベストアンサー
コンボボックスに連動するテキストボックスの表示数変更
入力フォームを作成しており、コンボボックスの数に応じて、 テキストボックスの表示数を変更させたいと考えています。 コンボボックスでの選択が「2」になれば、その下に表示される テキストボックスの数も2つ表示させたいと思います。 <html> <head> </head> <body> <form> 項目数： <SELECT> <OPTION selected>1</OPTION> <OPTION>2</OPTION> <OPTION>3</OPTION> <OPTION>4</OPTION> <OPTION>5</OPTION> </SELECT> <br> <br> 項目1：<input type="text" name="test1" size="20"> </form> </body> </html> 処理方法をサイトなどで調べましたが、該当するものが見あたりませんでしたので、ご教授お願いいたします。
- jetcity7
- お礼率100% (7/7)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
この手のヤツは、最初から最大数分の要素をつくっておき、 当初は使えなくしておくというのが、よろしいのでは？ もちろんムダも多いですが、消したりつけたりするときには 確実に処理ができます。 <html> <head> <script> function changeFunc(obj,dClass,iClass){ var f=obj.form; var v=Number(obj.value); var cnt=1; for(var i=0;i<f.length;i++){ if(f[i].className==iClass){ if(v>=cnt++) f[i].disabled=false; else f[i].disabled=true; } } var cnt=1; var divs=document.getElementsByTagName('div'); for(var i=0;i<divs.length;i++){ if(divs[i].className==dClass){ if(v>=cnt++) divs[i].style.display="block"; else divs[i].style.display="none"; } } } </script> </head> <body> <form> 項目数： <SELECT onChange="changeFunc(this,'viewClass','inputClass')"> <OPTION value="1" selected>1</OPTION> <OPTION value="2">2</OPTION> <OPTION value="3">3</OPTION> <OPTION value="4">4</OPTION> <OPTION value="5">5</OPTION> </SELECT> <br> <br> <div class="viewClass">項目1：<input type="text" name="test1" class="inputClass" size="20"></div> <div class="viewClass">項目2：<input type="text" name="test2" class="inputClass" size="20" disabled></div> <div class="viewClass">項目3：<input type="text" name="test3" class="inputClass" size="20" disabled></div> <div class="viewClass">項目4：<input type="text" name="test4" class="inputClass" size="20" disabled></div> <div class="viewClass">項目5：<input type="text" name="test5" class="inputClass" size="20" disabled></div> </form> </body> </html> 単純にするなら、divのstyleのdisplayだけつけたり消したりでも いいでしょう。 サブミットするときムダなデータが飛ばなくするにはdisabledを つける必要があります。
その他の回答 (1)
- is_may
- ベストアンサー率65% (58/89)
一応作ってみましたがJavaScriptの知識がないと使い物にならないと思います。 <script language="javascript"><!-- //テキストフィールドのname=""の設定（上から順番に） tname=new Array("test1","test2","test3","test4","test5"); function xSetTextfield(num){ if(!num)num=1; str=""; for(i=0;i<num;i++){ str+="項目"+(i+1)+"：<input type='text' name="+tname[i]+" size='20'><br>"; } document.getElementById("slf").innerHTML=str; } onload=xSetTextfield; --> </script> <form>項目数： <select onchange="xSetTextfield(this.options[this.selectedIndex].text)"> <option selected>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <br> <br> <div id="slf"></div> </form>
お礼
お礼が遅くなり、申し訳ありません。 どうもありがとうございました。 JavaScriptは勉強中でして・・・
お礼
お礼が遅くなり、申し訳ありません。 どうもありがとうございました。 詳しい解説もつけていただき、ありがとうございました。