「ブロック機能」のリニューアルについて

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

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

教えて!goo グレード

A 回答 (4件)

おおむね#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>
    • good
    • 0
この回答へのお礼

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

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

function init() {


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

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


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

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

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

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

<!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();">
<!--
select要素は置換インライン要素だったかな?
なのでXHTML 1.0 Strictにおいては,body要素直下には置けない
また,
<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ >
なので,option要素を持たないselect要素も駄目。ECMAscriptが無効なときにも
Validになるよう,努力しましょう。
-->
<div id="sample">
</div>
</body>
</html>
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

教えて!goo グレード

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング