javascriptを用いて1~10を選べるプルダウンを作りたい。

javascriptとHTMLを扱う練習をしています。
プルダウンの中身をjavascriptで1～10程度作って、
それから選びたいのですがイマイチピンと来ません。

lang
1<!DOCTYPE html>
2<html>
3<head>
4<title>1~10を選べるプルダウン</title>
5</head>
6<body>
7<form name="registration">
8<select name="selectNumber"></select>歳
9</form>

lang
1
2<script type="text/javascript">
3
4function setSelectNumber(){
5for(var i = 1; i<= 10; i++){
6

今大枠がこんな感じです。
どうかご教授下さい。

行動規範の内容に同意します

回答1件

ベストアンサー

lang
1function setSelectNumber(){
2    var selectElement = document.getElementById("セレクトボックスのID");
3    for(var i = 1; i <= 10; i ++){
4        var option = document.createElement("option");
5        option.value = i;
6        option.innerText = i;
7        selectElement.appendChild(option);
8    }
9}

以上でできます。
<select>タグにIDを付けて、そのIDを元にselect要素を取得し、そのselect要素にoptionを追加していきます。

以下追記

通常、htmlでセレクトボックスを記述する場合には

lang
1<select id="select">
2<option value="1">1</option>
3<option value="2">2</option>
4　　　・
5　　　・
6　　　・
7</select>

と記述します。
このようにセレクトボックス内のリストは<option>タグによって決められます。
ですので、javascriptでセレクトボックスを作るには、<option>タグをセレクトボックスに追加する形で作成します。
注）これだけがセレクトボックスを作成する方法ではありません。ほんの一例になります。

したがって、先ほどのコードを説明すると、次のようになります。

lang
1function setSelectNumber(){
2    var selectElement = document.getElementById("セレクトボックスのID");
3    for(var i = 1; i <= 10; i ++){
4        var option = document.createElement("option"); //ここで<option>要素を作成
5        option.value = i; //optionのvalue属性を設定
6        option.innerText = i; //リストに表示するテキストを記述
7        selectElement.appendChild(option); //セレクトボックスにoptionを追加
8    }
9}

投稿2015/05/26 08:14

編集2015/05/26 09:08

orange0190

総合スコア1698

orange0190

2015/05/26 08:18

このコードで分からないことがあれば、コメントをください。解説します。

R.lawliet

2015/05/26 08:54

簡潔なコードをありがとうございます。頭が???になっているので解説して頂けるととても嬉しいです>< 追加の質問をさせて頂きます。取り敢えず上から見ていくと、一行目でセレクトIDからのElementというオブジェクトを取得しselectElementに格納次のvar option = document.createElement("option"); この"option"がどんな存在なのか分かりません。いくつか入れる候補があるのでしょうか・・・それとも宣言の変数名を変えると""の中も連動して変更するのですか?

orange0190

2015/05/26 09:09

追記しました。

R.lawliet

2015/05/26 12:31

うわぁありがとう御座います！！！やっと心底から理解が出来ました＞＜モヤモヤが晴れてすっきりです♪ 本当親切にありがとう御座いました！！

行動規範の内容に同意します