- ベストアンサー
HTML オプションメニューの自動作成
下記のようなオプションメニューで連続した項目を作るには？ javascrip でfor文を使って出来ないでしょうか？ また onLoad="楽に作る関数" とかで最初からこのオプションメニューを自動作成出来ませんか？ <SELECT> <OPTION value="123" selected>123</OPTION> <OPTION value="124" selected>124</OPTION> <OPTION value="125" selected>125</OPTION> <OPTION value="126" selected>126</OPTION> <OPTION value="127" selected>127</OPTION> <OPTION value="128" selected>128</OPTION> <OPTION value="129" selected>129</OPTION> <OPTION value="130" selected>130</OPTION> </SELECT> よろしくお願します。
- situmonnsya
- お礼率70% (374/532)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
全部selectedなの？勝手に変更。 <script type="text/javascript"> var i=0,ht =[],d=128; ht[i] = '<select id="tekitouni">'; for( var i=123; i<131;) ht[i] = '<option value="'+i+'"'+(i==d?' selected':'')+'>'+(i++)+'</option>'; ht[i] = '</select>'; document.write( ht.join('') ); </script>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
DOMっぽく書いてみました。 multipleがIEはきかないので例外処理が必要です。 <html> <head> <script> window.onload=function(){ setSelect(); } function setSelect(){ var IE=navigator.userAgent.match("MSIE"); var p=document.getElementById("hoge").firstChild; while(p){ if(p.nodeName=="P") break; p=p.nextSibling; } if(p.nodeName!="P") return false; var sb=p.firstChild; while(sb){ if(sb.nodeName=="INPUT" && sb.type=="submit") break; sb=sb.nextSibling; } if(IE){ var s= document.createElement("<select multiple>"); }else{ var s=document.createElement("select"); s.setAttribute("multiple","multiple"); } s.setAttribute("name","s1"); s.setAttribute("size","5"); for(var i=123;i<=130;i++){ var o=document.createElement("option"); o.setAttribute("value",i); o.setAttribute("selected","selected"); var oo=document.createTextNode(i); o.appendChild(oo); s.appendChild(o); } p.insertBefore(s,sb); } </script> </head> <body> <form id="hoge"> <p> <input type="submit" value="go"> </p> </form> </body> </html>
お礼
すみません。、selectedはひとつだけでした。 <multipleがIEはきかないので・・・ そうなんですか。 近々必要になる場面が出てくる予定で、助かりました。 誠にありがとうございます。
お礼
<全部selectedなの？ すみません。間違いました。selectedはひとつだけです。 ht[]の中のh[1]～h[122]は空なんですね？ ht.join('')で連結していますが、途中の空部分は無駄（メモリの）になるんでしょうか？ <script type="text/javascript"> var i=0,ht =[],d=128; ht[0] = '<select id="tekitouni">'; for( i=123; i<=130;i++) ht[i-122] = '<option value="'+i+'"'+(i==d?' selected':'')+'>'+i+'</option>'; ht[i-122] = '</select>'; document.write( ht.join('') ); </script> としてましたが、かえって見ずらい記述になってしまいました。 ありがとうございます。