JQuery zeigt divs und Formularelemente basierend auf Dropdown - javascript, jquery, html-select

Ich habe wenig Erfahrung mit JQuery. Einfache Dinge wie Anzeigen / Ausblenden von divs usw. Was ich zu erreichen versuche, ist, neue Formularelemente basierend auf einem Dropdown-Wert anzuzeigen / zu erstellen und ID-Werte zuzuweisen.

Also wenn ich Option 5 zum Beispiel aus einem Drop auswähleDann sollte das #group div 5-mal angezeigt oder geschrieben und ein Wert zugewiesen werden. Das folgende Beispiel wäre, wenn ich Option 5 wähle, wie ich versuche, es herauszuholen. Wenn ich 10 oder 20 gemacht habe, würde es 10 Mal angezeigt, oder wenn ich 2 tat, würde es 2 Mal angezeigt. Ich kann dies mit document.write außerhalb von jquery erreichen, aber es scheint, als gäbe es einen einfacheren Weg ...

<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>

Antworten:

Ich habe eine hinzugefügt #groups div, dass ich die Zeilen anhängen und auch jedes Mal löschen konnte, wenn eine neue Nummer aus der Dropdown-Liste ausgewählt wurde Ich habe auch einen Standardwert von Null hinzugefügt, um damit zu beginnen.

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