![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
かなり初歩的な質問だと思いますが
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;
}
のようにしたのですがうまくいきません。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.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>
No.3
- 回答日時:
function init() {
document.f1.s1.options.length = 0; //初期化
for(i=1; i<=100; i++) { document.f1.s1.options[i-1] = new Option(i,i); }
}
前括弧が抜けていました。
No.2
- 回答日時:
古いブラウザまで含めての場合や、
後からoptionをオブジェクトとして利用する事があまりないのなら。
function init() {
document.f1.s1.options.length = 0; //初期化
for(i=1; i<=100; i++) { document.f1.s1.options[i-1] = new Optioni,i); }
}
でも十分かな。
No.1
- 回答日時:
<!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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
リクエストに応じたselectedの初期値設定方法
Java
-
OPTIONタグにループは使えないでしょうか?
HTML・CSS
-
JSPで<SELECT>の中にDBから持ってきたデータを反映させたい
Java
-
-
4
フォーム上で押されたボタンによってサーブレットの処理を変えたい
Java
-
5
JSPでのリストボックス表示
Java
-
6
servletからjspへオブジェクトの配列情報を送る方法
Java
-
7
JavaScript window.openで開く際、そのwindowの背景色を指定したい
JavaScript
-
8
javascriptでセレクトボックスのselected"を動的につ"
JavaScript
-
9
単一グループのグループ関数ではありません。
Oracle
-
10
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
11
【jsp/Java】チェックボックスの状態をリロード時に保持したいです。
JavaScript
-
12
jsp/Servletの動的に増えるフォーム情報受け取りについて質問です。
Java
-
13
where句中のtrim関数について
Oracle
-
14
指定した年月までのデータを取得するSQL文
Oracle
-
15
javaでDBから取得したデータのJSP表示
Java
-
16
JSPでHashMap・配列の変数の値を扱う方法について
Java
-
17
HTML:Tableタグに対し、JavaScriptで動的にイベントを
JavaScript
-
18
jspからServletを呼び、元のjspページに戻るにはどうしたらよいですか?
Java
-
19
boolean型のフィールドとゲッターメソッドの命名について
Java
-
20
Java-jspの画面入力値保持について
Java
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
ラジオボタンとドロップダウン...
-
Selectボックスの幅を自動で広...
-
selectタグに直接onChangeを書...
-
html selectの内容を初期値に戻す
-
複数のプルダウンの連動とリンク
-
【javascript・PHP】プルダウン...
-
JavaScriptで自動計算
-
現在時刻を取得してフォームのs...
-
CSVファイルを読みこみ、プルダ...
-
セレクトボックスで現在選択さ...
-
リストボックスの操作について
-
ブラウザの戻るボタンを押した...
-
セレクトメニューの連動、そし...
-
javascriptでselectボックスの<...
-
リストボックス間で値をコピー...
-
JavaScriptでのセレクトボック...
-
JavaScriptのキーイベントにつ...
-
テーブルにおける行(セルにプル...
-
セレクトボックスの値から料金...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectの中身をfor文で入れる
-
Selectボックスの幅を自動で広...
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
jQuery セレクトボックスで選択...
-
UWSCのIE操作でプルダウンを選...
-
html selectの内容を初期値に戻す
-
現在時刻を取得してフォームのs...
-
javascriptでの2つのプルダウン...
-
テーブルにおける行(セルにプル...
-
selectタグに直接onChangeを書...
-
【javascript・PHP】プルダウン...
-
セレクトメニューで選択された...
-
ブラウザの戻るボタンを押した...
-
JQuery selectが反映されない
-
<textarea>にプルダウンを表示...
-
プルダウンで現在の年月日を取...
-
リストボックスの項目の順番を...
-
親ウィンドウのリスト値変更
おすすめ情報