1

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

因此，如果我从下拉列表中选择选项 5，它应该显示或写入 #group div 5 次并为其分配一个值。以下示例是如果我选择了选项 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>
4

1 回答 1

0

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

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

于 2013-10-12T04:18:07.767 回答