Selectの中身をfor文で入れる

締切済

質問者：oxfax
質問日時：2008/01/14 12:52
回答数：4件

かなり初歩的な質問だと思いますが
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;
}

のようにしたのですがうまくいきません。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： yambejp
回答日時：2008/01/15 00:10

おおむね#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>

- 0
- 件

通報する

この回答へのお礼

formにnameは非推奨なんですね。
以後気をつけます。
細かいプログラムありがとうございます。

通報する

お礼日時：2008/01/15 01:40

No.3

回答者： Dumper
回答日時：2008/01/14 23:24

function init() {

document.f1.s1.options.length = 0; //初期化
for(i=1; i<=100; i++) { document.f1.s1.options[i-1] = new Option(i,i); }
}
前括弧が抜けていました。

- 0
- 件

通報する

No.2

回答者： Dumper
回答日時：2008/01/14 23:20

古いブラウザまで含めての場合や、

後からoptionをオブジェクトとして利用する事があまりないのなら。

function init() {
document.f1.s1.options.length = 0; //初期化
for(i=1; i<=100; i++) { document.f1.s1.options[i-1] = new Optioni,i); }
}
でも十分かな。

- 1
- 件

通報する

この回答へのお礼

ありがとうございます。
ブラウザなど細かい設定は気にしていないので
今回はこのプログラムでできました。

通報する

お礼日時：2008/01/15 01:39

No.1

回答者： himajin100000
回答日時：2008/01/14 14:48

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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();">

<div id="sample">
</div>
</body>
</html>