HTML　オプションメニューの自動作成

解決済

質問者：situmonnsya
質問日時：2009/01/06 02:13
回答数：2件

下記のようなオプションメニューで連続した項目を作るには？
javascrip でfor文を使って出来ないでしょうか？
また　onLoad="楽に作る関数" とかで最初からこのオプションメニューを自動作成出来ませんか？

<SELECT>
<OPTION value="123" selected>123</OPTION>
<OPTION value="124" selected>124</OPTION>
<OPTION value="125" selected>125</OPTION>
<OPTION value="126" selected>126</OPTION>
<OPTION value="127" selected>127</OPTION>
<OPTION value="128" selected>128</OPTION>
<OPTION value="129" selected>129</OPTION>
<OPTION value="130" selected>130</OPTION>
</SELECT>

よろしくお願します。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： _pipi_
回答日時：2009/01/06 07:23

全部selectedなの？勝手に変更。

- 0
- 件

通報する

この回答へのお礼

<全部selectedなの？
すみません。間違いました。selectedはひとつだけです。

ht[]の中のh[1]～h[122]は空なんですね？
ht.join('')で連結していますが、途中の空部分は無駄（メモリの）になるんでしょうか？

<script type="text/javascript">
var i=0,ht =[],d=128;
ht[0] = '<select id="tekitouni">';
for( i=123; i<=130;i++)
ht[i-122] = '<option value="'+i+'"'+(i==d?' selected':'')+'>'+i+'</option>';
ht[i-122] = '</select>';
document.write( ht.join('') );
</script>

としてましたが、かえって見ずらい記述になってしまいました。

ありがとうございます。

通報する

お礼日時：2009/01/06 22:25

No.2

回答者： yambejp
回答日時：2009/01/06 11:43

DOMっぽく書いてみました。

multipleがIEはきかないので例外処理が必要です。

<html>
<head>
<script>
window.onload=function(){
setSelect();
}
function setSelect(){
var IE=navigator.userAgent.match("MSIE");
var p=document.getElementById("hoge").firstChild;
while(p){
if(p.nodeName=="P") break;
p=p.nextSibling;
}
if(p.nodeName!="P") return false;
var sb=p.firstChild;
while(sb){
if(sb.nodeName=="INPUT" && sb.type=="submit") break;
sb=sb.nextSibling;
}
if(IE){
var s= document.createElement("<select multiple>");
}else{
var s=document.createElement("select");
s.setAttribute("multiple","multiple");
}
s.setAttribute("name","s1");
s.setAttribute("size","5");
for(var i=123;i<=130;i++){
var o=document.createElement("option");
o.setAttribute("value",i);
o.setAttribute("selected","selected");
var oo=document.createTextNode(i);
o.appendChild(oo);
s.appendChild(o);
}
p.insertBefore(s,sb);
}
</script>
</head>
<body>
<form id="hoge">
<p>
<input type="submit" value="go">
</p>
</form>
</body>
</html>