Question

我的javascript代码有点问题，我构建了一个函数，用于添加用户选择的数量的文件，这是函数

$(document).ready(function() {
  $('.qty').change(function(){
     for (var i=0;i<$('.qty').val();i++){
       $('.append').append('<select name="data[]"><option value="one">1</option></select>');
     }
  });
});

和HTML代码是：

<select name="qty" class="qty">
            <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="append">

</div>

当我在数量中选择一个值时，让我们说3，它打开了3个选择字段，但是当我将选择更改为2时，它将我加2，所以我有5个选择文件，我如何重置？如果我选择1，它将打开我1，如果我将其更改为2，它将改变并打开我2而不是像现在一样。

Answer 1

尝试：

$(document).ready(function() {
  $('.qty').change(function(){
    var html=''
     for (var i=0;i< parseInt($('.qty').val());i++){
       html += '<select name="data[]"><option value="one">1</option></select>';
     }
     $('.append').html(html);
  });
});

Answer 2

在添加之前，只需清除.append div内容，您可以使用.html('')清除它，因此您只需要替换以下行：

$('.append').append('<select name="data[]"><option value="one">1</option></select>');

这个：

$('.append').html('').append('<select name="data[]"><option value="one">1</option></select>');

Answer 3

使用.html

$(document).ready(function() {
  $('.qty').change(function(){
      var k=""   
      for (var i=0;i<$('.qty').val();i++){
          k += '<select name="data[]"><option value="one">1</option></select>';
     }
     $('.append').html(k);
  });
});

这是一个有效的jsfiddle http://jsfiddle.net/P2F9x/

Answer 4

你可以添加一行来清空循环前的附加div

$('.append').empty();

所以它会是：

$(document).ready(function() {
  $('.qty').change(function(){
     $('.append').empty();
     for (var i=0;i<$('.qty').val();i++){
       $('.append').append('<select name="data[]"><option value="one">1</option></select>');
     }
  });
});

小提琴：

http://jsfiddle.net/

Answer 5

而不是：

$('.append').append('<select name="data[]"><option value="one">1</option></select>');

使用

$('.append').html('<select name="data[]"><option value="one">1</option></select>');

我认为这是导致它附加其他字段的原因。

Answer 6

使用此方法重置html：

$('.append').html('');

像：

$(document).ready(function() {
  $('.qty').change(function(){
    $('.append').html('');
     for (var i=0;i<$('.qty').val();i++){
       $('.append').append('<select name="data[]"><option value="one">1</option></select>');
     }
  });
});

Answer 7

要保留用户已经做出的任何选择，您可以稍微改变结构

$(document).ready(function() {
  $('.qty').change(function(){
     var count = $(.append).find("select").length,
         qty = $('.qty').val(),
         i,
         html = $('.append').html();
     //append any needed elements
     if(count < qty) {
       for (i=count;i < qty; i += 1){
         html += '<select name="data[]"><option value="one">1</option></select>';
       }
       $('.append').html(html);
     }
     //remove any excess elements
     for(;count<$(.append).find("select").length; 
          $(.append).find("select:last").remove()){}
  });
});

Javascript重置循环

7 个答案: