javascript - jQuery 追加 x 元素列表

Question

我想了解如何在值更改时制作 x 元素的列表。举个例子吧

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>

那么，我怎样才能显示等于选择输入值的 X 数字元素？

Answer 1

把你的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>

或者该值将始终为 1，您将只添加一个元素。

比起将条件循环到:

 $('.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>');
     }
 });

我使用 $('.list').empty(); 在添加元素之前清除列表。

演示:http://jsfiddle.net/IrvinDominin/Y79ec/