jQuery append list of x elements

Question

I am trying to understand how can I make a list of x elements when a value change. Let's go with the example

HTML

<select class="num">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
</select>

<div class="list"></div>

jQuery

<script>
    $('.num').change(function() {
      num_val = $(this).val(); // get the number of the elements that will be shown
      for (i =0; i == num_val; i++) { // I do a for loop for append each div to the list but it doesn't work it's show me just 1.
         $('.list').append('<div>' + i + '</div>'); 
      }
    });
</script>

So, how can I display X number element equal to the value on select input?

for (i =0; i< num_val; i++)

Arun P Johny
– Arun P Johny

2013-11-25 12:12:11 +00:00
Commented Nov 25, 2013 at 12:12 — Arun P Johny
– Arun P Johny, Commented Nov 25, 2013 at 12:12

Irvin Dominin · Accepted Answer · 2013-11-25 12:17:13Z

1

Change you html into:

<select class="num">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

or the value will be always 1, and you'll add only one element.

Than cange you loop condition into:

 $('.num').change(function () {
     num_val = $(this).val(); // get the number of te elements that will be shown
     $('.list').empty();
     for (i = 0; i < num_val; i++) { // i do a for loop for append each div to the list but it doesn't work it's show me just 1.
         $('.list').append('<div>' + i + '</div>');
     }
 });

I used $('.list').empty(); to clear the list before append elements to it.

Demo: http://jsfiddle.net/IrvinDominin/Y79ec/

answered Nov 25, 2013 at 12:17

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

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

1 Comment

Irvin Dominin Over a year ago

@Gilbert you are welcome! If solved consider to tick the answer as solved

Roko C. Buljan · Accepted Answer · 2013-11-25 12:26:35Z

1

DEMO

_{note the changed value}

<option value="3">3</option>

$('.num').change(function() {  
      for (var i=0; i<this.value; i++) {
         $('.list').append('<div>' + (i+1) + '</div>'); 
      }
});

Performance-wise it's a bad idea to catch your .list element and create HTML elements all over again in a loop, so a better approach would be:

var list = '';

$('.num').change(function() {  
      for (var i=0; i<this.value; i++) {
         list += '<div>' + (i+1) + '</div>';
      }
      $('.list').append( list ); // only once after the loop.
});

edited Nov 25, 2013 at 12:26

answered Nov 25, 2013 at 12:19

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Comments

rajesh kakawat · Accepted Answer · 2013-11-25 12:20:35Z

0

try something like this

html code

<select class="num">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
</select>

javascript code

    $(document).ready(function(){
         $('.num').change(function() {
             $('.list').html(''); 
              var num_val = parseInt($(this).val()); // get the number of te elements that will be shown
              console.log(num_val);
              for (var i =1; i <= num_val; i++) {
                 $('.list').append('<div>' + i + '</div>'); 
              }
        });
    });

answered Nov 25, 2013 at 12:20

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Collectives™ on Stack Overflow

jQuery append list of x elements

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related