jquery loop to create elements

Question

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

Please provide some of your markup and a bit more detail about what you're trying to do. — harpo
– harpo, Commented Mar 30, 2010 at 15:19

Tatu Ulmanen · Accepted Answer · 2010-03-30 19:36:31Z

31

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);
});

edited Mar 30, 2010 at 19:36

answered Mar 30, 2010 at 15:22

Tatu Ulmanen

125k34 gold badges190 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michel Over a year ago

Does Jquery actually knows that when you append html to a closed DIV ('<div />') that it should create <div>appended html</div> ?

Tatu Ulmanen Over a year ago

@Michel, yes. $('<div />') just creates an empty div element and is equivalent to $('<div></div>') or $(document.createElement('div')).

Michel Over a year ago

nice, Jquery keeps surprising me in a positive way

Alistair · Accepted Answer · 2010-04-01 09:04:21Z

To slightly modify Tatu's answer,

$('select').change(function() {
 var num = parseInt($(this).val(), 10);
 var container = $('<div />');

 for(var i = 1; i <= num; i++) {
     $('<input />', {
         id: "id" + 1,
         name: "name" + 1
     }).appendTo(container);
 }

 $('somewhere').html(container);
 });

This way is faster and a bit easier to read. The reason it is faster is because jQuery heavily caches creating elements. It caches "<input />" the first time and then just uses the cached object to create more of them. It can do this because the text doesn't change. However, it can't do this caching with append (or html not created by calling the main jquery function $ AFAIK) since due to the ids they are unique each loop. See John Resig's 'Things you might not know about jQuery' speech for info on this.

Matt · Accepted Answer · 2010-03-30 15:25:30Z

3

<select>
    <option value = '1'>1</option>
    <option value = '2'>2</option>
    ...
    <option value = '10'>10</option>
</select>
<div id="container">
</div>

For your markup.

Then

$('select').bind('change', function () {
    var val = parseInt($(this).val(), 10) + 1,
        str = '';

    for (var i=1; i<val;i++) {
        str += '<input type="text" name="name' + i + '" id="id' + i + '"/>';
    }

    $('#container').html(str);
});

answered Mar 30, 2010 at 15:25

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Comments

kbro · Accepted Answer · 2016-11-17 14:59:06Z

This uses $.map() to iterate over an array using the index to emulate the "0..N" range operator of languages like Perl and PHP. Since $.map() returns an array of the return values of each call to the callback function, we can pass this straight to $().html() to set the content of the parent element. Neat?

Just make sure you declare the callback function's 'object' and 'index' parameters in the correct order - they're the opposite way around to $.each()!

HTML

<div id='container'></div>

JS

const HOW_MANY = 10;

$('#container').html(
  $('<select/>', { id: 'selection' }).html(
    $.map(Array(HOW_MANY), function(o,i) {
      i++;  // because array indices run from 0
      return $('<option/>', { value: i }).text(i);
    }) // map
  ) // <select/>
);

FIDDLE

https://jsfiddle.net/kmbro/xxtbjgzo/

Collectives™ on Stack Overflow

jquery loop to create elements

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related