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 に変更すると変更され、現在のように 3 ではなく 2 が開きます。

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を空にするために1行追加できます

$('.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 に答える
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

.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 に答える
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

それ以外の：

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

ユーザーがすでに行った選択を保持するには、構造を多少変更することができます

$(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 に答える