Jquery セレクトボックス追加

締切済

質問者：h19850323
質問日時：2012/11/28 01:05
回答数：2件

現在jqueryにて、セレクトボックスchangeの値でセレクトボックスを追加するというものを作っています。
わからない点がいくつかあり、ご質問させていただきました。

<select name="num" id="num">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>
というselectboxがあったときに、changeイベントで常に値をとっています。

$('#num').change(function(){
var numTotal = eval($('#num :selected').val());
$('#num1 > select').remove();
for(i = 1; i <= numTotal; i++) {
$('#num1').append($('<select name="num1['+ i +']" class="num1">'));
for(no = 1; no <= 99; num++) {
$('#num1').append('<option value="'+ no +'">'+ no +'</option>');
}
$('#num1').append($('</select>'));
}
});
と記述をしているのですが、
numで5を選択すると5個分selectboxは表示されます。
ですが、optionをnoで回しているとnumで選択した数ぶんループしています。
またnumでの値で表示されたslectbox(num1)2つめ以降から様子が変わり、noのループ数が1つずつ減っていきます。

例：numで5を選択
num1[0]では99までの数字が5回表示され、num1[1]だと99までの数字が4回表示され、num[2]だと99までの数字が3回表示されてしまいます。
これを正常に各num1[0]、num1[1]は99までの数字を1回のみに表示させるにはどうしたらよいでしょうか？

悩んでしまったため、投稿させていただきました。
どなたかご教授いただけないでしょうか？

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： blanc210
回答日時：2012/11/28 13:53

元になるselectboxを、選択した回数分clone作って名前を変えてやればいかがでしょうか

--PHP--
<select name="num" id="num">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
</select>

<select name="num1[0]" id="sel_0">
<? for($i=1;$i<=99;$i++){ ?>
<option value="<?= $i ?>"><?= $i ?></option>
<? } ?>
</select>

--javaScript--
$('#num').change(function(){
var numTotal = eval($('#num :selected').val());
$('.sel').remove();
for(var i=1;i<numTotal;i++){
$('#sel_0').clone().insertAfter($('#sel_' + (i - 1))).attr('id', 'sel_' + i).attr('name', 'num1[' + i + ']').addClass('sel');
}
});

この回答への補足

お忙しい中有難う御座います。
思っている動作ができました。

度重なるご質問で申し訳ないのですが、selectboxがcloneで生成される際に<div>タグなどで囲みたいのですが、どこに追加すれば可能でしょうか？

いくつか試してみたのですが、divにidとnameが付与されてしまいます。

理想は
<div id="sel_1">
<select name="num11">
<opton>
</select>
</div>

<div id="sel_2">
<select name="num12">
<opton>
</select>
</div>

が理想になります。