Javascript jQuery附加x元素列表

我试图理解，当值发生变化时，如何列出

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>

1.
2.
3.
4.
5.

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>

$（'.num'）.change（函数（）{
num_val=$（this）.val（）；//获取将显示的元素数
for（i=0；i==num_val；i++）{//我做了一个for循环，将每个div追加到列表中，但它不起作用，它只显示1。
$（'.list'）。追加（''+i+''）；
}
});

那么，如何显示与select input上的值相等的

X

number元素？

将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.
2.
3.
4.
5.

或者该值将始终为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>');
     }
 });

$（'.num'）.change（函数（）{
num_val=$（this）.val（）；//获取将显示的te元素数
$（'.list'）.empty（）；
for（i=0；i

我使用了

$（'.list'）.empty（）

在向列表添加元素之前清除列表

演示：

请注意更改的值

3

$（'.num'）.change（函数（）{
对于（var i=0；i尝试这样的方法

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.
2.
3.
4.
5.

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

$（文档）.ready（函数（）{
$（'.num'）.change（函数（）{
$（'.list'）.html（''）；
var num_val=parseInt（$（this）.val（））；//获取将显示的te元素数
console.log（num_val）；
对于（var i＝1；i <代码>为（i＝0；i < NUMNVAL；I++）< /代码> @ Gilbert欢迎！如果解决了，请考虑将答案勾成已解。
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.
});

<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>

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