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/

Answer 2

DEMO

_{注意更改后的值}

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

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

性能方面，抓住 .list 元素并创建HTML元素是个坏主意在循环中重复一遍，所以更好的方法是：

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

Answer 3

尝试这样的事情

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>

javascript代码

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

jQuery追加x个元素的列表

3 个答案: