/ / JQuery wyświetla divy i elementy formularzy na podstawie menu rozwijanego - javascript, jquery, html-select

JQuery pokazuje elementy div i formularze na podstawie menu rozwijanego - javascript, jquery, html-select

Mam minimalne doświadczenie JQuery. Proste rzeczy, takie jak pokazywanie / ukrywanie div, itp. To, co próbuję osiągnąć, to pokazywanie / tworzenie nowych elementów formularza na podstawie wartości rozwijanej i przypisywanie wartości id.

Więc jeśli wybiorę opcję 5 na przykład z upuszczeniaw dół, powinien wyświetlić lub zapisać # div grupy 5 razy i przypisać wartość do. Poniższy przykład byłby, gdybym wybrał opcję 5, w jaki sposób próbuję ją uzyskać. Gdybym zrobił 10 lub 20, wyświetliłby 10 razy, a gdybym zrobił 2, wyświetliłby 2 razy. Mogę to osiągnąć za pomocą document.write poza jquery, ale wydaje się, że byłby łatwiejszy sposób ...

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

Odpowiedzi:

1 dla odpowiedzi № 1

Dodałem #groups div, do którego mogłem dołączyć rzędy, a także wyczyścić za każdym razem, gdy z rozwijanej listy wybierany był nowy numer. Dodałem również zerową wartość domyślną na początek.

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