JQuery 根据下拉列表显示 div 和表单元素

Question

我有很少的JQuery经验。简单的事情，如显示/隐藏div等。我试图完成的是基于下拉值显示/创建新的表单元素并分配 id 值。

因此，如果我从下拉列表中选择选项 5，它应该显示或写入div 5 次 #group 并为其分配一个值。以下示例是，如果我选择选项 5，我将如何尝试让它出来。如果我做了 10 或 20，它会显示 10 次，或者如果我做了 2 次，它会显示 2 次。我可以在jquery之外使用document.write来完成此操作，但似乎有一种更简单的方法...

<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

我添加了一个#groupsdiv，我可以将行附加到该div，并且每次从下拉列表中选择新数字时都可以清除。 我还添加了一个零默认值来开始。

$(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/