Question

我有最小的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>

Answer 1

我添加了一个#groups 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/

JQuery基于下拉列表显示div和表单元素

1 个答案: