- 締切済み
Selectの中身をfor文で入れる
かなり初歩的な質問だと思いますが select文のoptionの値に1~100の数値を入れたいときに JavaScriptではどのように記述すればいいのでしょうか。 ページ読み込み時にはフォームに代入したいので [htmlファイル] <body onload="init()"> ・・・ <form name="f1"> <select name="s1"></select> [jsファイル] function init() { for(i=1; i<=100; i++) document.f1.s1.value=i; } のようにしたのですがうまくいきません。
- oxfax
- お礼率27% (57/209)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
おおむね#1さんのやり方でよいでしょうけど、 せっかくなので細かく調整しました。 jsで外部にスクリプトをおいだすなら、bodyにonloadを書くのは 中途半端でもったいないのでjsに書いてしまった方がよいでしょう。 あとformにnameは非推奨ですのでidでやりましょう。 selectには初期値を設定すればイロイロ考えないですみます。 //sample.js window.onload=function(){init()} function init(){ var f = document.getElementById("f1"); for (var i = 1;i <= 100;i++){ var option = document.createElement("option"); option.setAttribute("value",i); option.appendChild(document.createTextNode(i.toString())); f1.s1.appendChild(option); } } //sample.htm <html> <head> <script type="text/javascript" src="sample.js"></script> </head> <body> <form action="hoge.php" method="get" id="f1"> <select name="s1"> <option value="">選択してください</option> </select> </form> </body> </html>
- Dumper
- ベストアンサー率28% (24/84)
function init() { document.f1.s1.options.length = 0; //初期化 for(i=1; i<=100; i++) { document.f1.s1.options[i-1] = new Option(i,i); } } 前括弧が抜けていました。
- Dumper
- ベストアンサー率28% (24/84)
古いブラウザまで含めての場合や、 後からoptionをオブジェクトとして利用する事があまりないのなら。 function init() { document.f1.s1.options.length = 0; //初期化 for(i=1; i<=100; i++) { document.f1.s1.options[i-1] = new Optioni,i); } } でも十分かな。
お礼
ありがとうございます。 ブラウザなど細かい設定は気にしていないので 今回はこのプログラムでできました。
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q3678812 TestCase 1</title> <script type="text/javascript"> //<![CDATA[ //一応出来る。 //IEを考えなくていいならcreateElementNSを用いる。 //「出来る」のと「適切」なのは //別次元。ECMAscript無効な人には何も表示されないため， //PerlやPHPやRubyのプログラムでXHTMLを生成して //CGI経由でブラウザに送り出す方が満遍なく対応できる。 function selection(){ var div = document.getElementById("sample"); var select = document.createElement("select"); for (var i = 1;i <= 100;i++){ var option = document.createElement("option"); option.appendChild(document.createTextNode(i.toString())); select.appendChild(option); } div.appendChild(select); //折角だから5番目を選択してみる(0から始まるので6が選択される) select.selectedIndex = 5; } //]]> </script> </head> <body onload="selection();"> <!-- select要素は置換インライン要素だったかな？ なのでXHTML 1.0 Strictにおいては，body要素直下には置けない また， <!ELEMENT SELECT - - (OPTGROUP|OPTION)+ > なので，option要素を持たないselect要素も駄目。ECMAscriptが無効なときにも Validになるよう，努力しましょう。 --> <div id="sample"> </div> </body> </html>
お礼
formにnameは非推奨なんですね。 以後気をつけます。 細かいプログラムありがとうございます。