Selectボックスの要素入力を省略したい

質問

こんばんは。
現在htmlとjavascriptを使ってあるプログラムを作っているのですが、質問があります。

htmlのセレクトメニューを作ると、以下の様になると思います。
<select name="example">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
これでは項目数が増える分だけoption文を書かなければならないと思います。

そこで、html文の中でSelect文を使いたい地点に到達したら、Javascriptを呼び出して、option文を指定した数だけ繰り返してくれるようにしたいのです。

例えば呼び出すときに、変数(何項目作るか)を1つもっていく。
持っていった変数が20ならば、option文を
<option value="1">1</option>
<option value="2">2</option>
・・・・
<option value="19">19</option>
<option value="20">20</option>
として、html文に返すようにしたいのです。

この様なことは可能でしょうか？
よろしくお願いします。

回答No.1

yambejp · ベストアンサー

処理自体は以下のような感じで

<script>
window.onload=function(){
var hoge=document.getElementById("hoge");
var l=hoge.options.length;
var max=20;
while(l++ < max){
var opt=document.createElement("option");
opt.setAttribute("value",l);
opt.appendChild(document.createTextNode(l));
hoge.appendChild(opt);
}
}
</script>
<select name="example" id="hoge">
<option value="1">1</option>
</select>

ただし、javascriptでselectを吐き出すということは、
環境依存になりますので、ユーザビリティーはさがります。
あまりお勧めできません。

お礼

なるほど。そのようなソースになるんですね。
ユーザビリティが低下するということで、考えた結果html内に書くことにしました。

ただ、とても勉強になりました。
ありがとうございました。