セレクトボックス自動表示

質問

セレクトボックスの自動表示についてわからないことがあり、投稿させていただきました。

内容は
数字のセレクトボックスを複数つくり、その複数セレクトボックスの数字を全部足した合計の数を表示させ、さらに合計の数字の分だけ別でセレクトボックスを表示させるという内容です。

例
1つ目のセレクトボックス　012・・・89
2つ目のセレクトボックス　012・・・89
とあり、1つめのセレクトボックスを2とし、２つめのセレクトボックスも2とした場合、
合計は4になります。
その後また別のセレクトボックスを4つ表示させるといったことをしたいのですが、記述方法がわかりません。

お分かりの方がいらっしゃいましたら、ご教授お願いいたします。

回答No.2

yambejp · ベストアンサー

もう少し自分で整理してから質問した方が効果的だと思いますが・・・
ざっとこんな感じ

<script>
function change(obj){
var n=obj.parentNode.firstChild;
var v=0;
while(n){
if(n.nodeName=="SELECT") v+=parseInt(n.value);
n=n.nextSibling;
}
document.getElementById("kekka").value=v;
var p=document.getElementById("newarea");
var s=p.getElementsByTagName("select");
var n=document.createElement("select");
for(var i=0;i<10;i++){
var op=document.createElement("option");
op.setAttribute("value",i);
op.appendChild(document.createTextNode(i));
n.appendChild(op);
}
for(var i=s.length;i<v;i++){
p.appendChild(n.cloneNode(true));
}
for(var i=s.length -1;i>=v;i--){
p.removeChild(s[i]);
}
}
</script>
<form>
<p>
<select onchange="change(this)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select onchange="change(this)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
SUM:<input type="text" id="kekka" value="0" style="text-align:right;width:2em;">
</p>
<p id="newarea">
</p>
</form>

回答No.1

yambejp

パターンとしては２つ

(1)最初からつくっておいて、隠しておきセレクトボックスをかえるたびに
みせたり隠したりする

(2)セレクトボックスをかえるたびに、追加ならDOMでセレクトボックスをつくり
削除ならremoveする

(1)は見せたり隠したりだけなので楽だけど、使うかどうかわからないものを
最初から用意しておくのは無駄。また最初に用意した数以上の処理ができない

(2)は都度オブジェクトをつくったり削除したりするので処理が煩雑。
実際には１から作る方法と、既存のオブジェクトをコピーして作る方法があります

お礼

お忙しい中、ご回答有難う御座います。

大変申し訳ないのですが、よろしければコードもご教示いただけないでしょうか？

申し訳ありませんが、宜しくお願いいたします。