Andy Andy - 21 days ago 6
jQuery Question

jquery loop to create elements

I have had no luck with this task so far so grateful for any help.

I have an html form, in which there is a small select menu (1-10)
ie

<select>
<option value = '1'>1</option>
<option value = '2'>2</option>
...
<option value = '10'>10</option>
</select>


depending on what value is selected i would like jquery to create (or remove) that number of input text boxes (with different names and id's).
eg if 2 was selected these inputs would be created:

<input type = 'text' name = 'name1' id = 'id1' />
<input type = 'text' name = 'name2' id = 'id2' />


i look forward to your no doubt simple and elegant solutions!
andy

Answer

Something like this:

$('select').change(function() {
     var num = parseInt($(this).val(), 10);
     var container = $('<div />');
     for(var i = 1; i <= num; i++) {
         container.append('<input id="id'+i+'" name="name'+i+'" />');
     }
     $('somewhere').html(container);
});