JQuery根據下拉列表顯示div和表單元素

Question

我擁有最少的JQuery體驗。簡單的東西，如顯示/隱藏div等我試圖完成的是顯示/創建基於下拉值的新表單元素並分配id值。

因此，如果我從下拉菜單中選擇選項5，它應該顯示或寫入#group div 5次併爲其賦值。下面的例子是如果我選擇了選項5我試圖讓它出來。如果我做了10或20次，它會顯示10次，或者如果我做了2次，它會顯示2次。我的jQuery之外與文件撰寫做到這一點，但似乎會有一個更簡單的方法...

<select name="amount" id="amount" title="amount"> 
    <option value="01">01</option> 
    <option value="02">02</option> 
    <option value="03">03</option> 
    <option value="04">04</option> 
    <option value="05" selected="selected">05</option> 
    <option value="06">06</option> 
    <option value="07">07</option> 
    <option value="08">08</option> 
    <option value="09">09</option> 
    <option value="10">10</option> 
</select> 

<div id="group"> 
<input name="group[1][]" type="checkbox" id="group[1][]" title="group[1][]" value="1"> 
<input name="group[1][]" type="checkbox" id="group[1][]" title="group[1][]" value="2"> 
<input name="group[1][]" type="checkbox" id="group[1][]" title="group[1][]" value="3"> 
<input name="group[1][]" type="checkbox" id="group[1][]" title="group[1][]" value="4"> 
</div> 

<div id="group"> 
<input name="group[2][]" type="checkbox" id="group[2][]" title="group[2][]" value="1"> 
<input name="group[2][]" type="checkbox" id="group[2][]" title="group[2][]" value="2"> 
<input name="group[2][]" type="checkbox" id="group[2][]" title="group[2][]" value="3"> 
<input name="group[2][]" type="checkbox" id="group[2][]" title="group[2][]" value="4"> 
</div> 

<div id="group"> 
<input name="group[3][]" type="checkbox" id="group[3][]" title="group[3][]" value="1"> 
<input name="group[3][]" type="checkbox" id="group[3][]" title="group[3][]" value="2"> 
<input name="group[3][]" type="checkbox" id="group[3][]" title="group[3][]" value="3"> 
<input name="group[3][]" type="checkbox" id="group[3][]" title="group[3][]" value="4"> 
</div> 

<div id="group"> 
<input name="group[4][]" type="checkbox" id="group[4][]" title="group[4][]" value="1"> 
<input name="group[4][]" type="checkbox" id="group[4][]" title="group[4][]" value="2"> 
<input name="group[4][]" type="checkbox" id="group[4][]" title="group[4][]" value="3"> 
<input name="group[4][]" type="checkbox" id="group[4][]" title="group[4][]" value="4"> 
</div> 

<div id="group"> 
<input name="group[5][]" type="checkbox" id="group[5][]" title="group[5][]" value="1"> 
<input name="group[5][]" type="checkbox" id="group[5][]" title="group[5][]" value="2"> 
<input name="group[5][]" type="checkbox" id="group[5][]" title="group[5][]" value="3"> 
<input name="group[5][]" type="checkbox" id="group[5][]" title="group[5][]" value="4"> 
</div> 

Answer 1

我添加了一個#groups格，我可以行追加到並明確每個時間從下拉菜單中選擇新號碼。我還添加了一個零默認值從開始。

$(document).ready(function(){ 
    $('#amount').change(function(){ 
    $('#groups').empty(); 
    var group = ''; 
    var number = parseInt($(this).val()); 
    for(var i=1;i<=number;i++){ 
    group += '<div id="group">' + 
    '<input name="group['+i+'][]" type="checkbox" id="group['+i+'][]" title="group['+i+'][]" value="1">' + 
    '<input name="group['+i+'][]" type="checkbox" id="group['+i+'][]" title="group['+i+'][]" value="2">' + 
    '<input name="group['+i+'][]" type="checkbox" id="group['+i+'][]" title="group['+i+'][]" value="3">' + 
    '<input name="group['+i+'][]" type="checkbox" id="group['+i+'][]" title="group['+i+'][]" value="4">' + 
    '</div>'; 
    } 
    $('#groups').append(group); 
    }); 
}); 

http://jsfiddle.net/L73cd/1/