1

我的 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，而不是现在的 3。

4

7 回答 7

4

尝试：

$(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);
  });
});
于 2012-12-07T12:27:14.500 回答
1

只需.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>');
于 2012-12-07T12:27:16.200 回答
1

采用.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/

于 2012-12-07T12:27:37.067 回答
1

您可以在循环之前添加一行以清空附加 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/

于 2012-12-07T12:28:18.177 回答
0

代替：

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

采用

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

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

于 2012-12-07T12:28:35.590 回答
0

使用它来重置 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>');
     }
  });
});
于 2012-12-07T12:29:52.283 回答
0

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

$(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()){}
  });
});
于 2012-12-07T12:35:53.500 回答