的Javascript復位循環

我有我的JavaScript代碼，一個小問題，我構建加一個數量提交用戶選擇的功能，這裏是功能的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周選擇的Fileds，如何我重置？如果我選擇1，它會打開我1，如果我改變它爲2它會改變，並打開我2不像3現在。

來源

2012-12-07 Bonik

嘗試：

$(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-07 12:27:14

刪除選擇用戶已經根據OP完成了（如果有的話）。除了在每個循環中更改DOM而不是每個循環都有一個明顯的改進 –

只是清除之前追加.append格的內容，你可以用.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-07 12:27:16 Nelson

通過清除html，您還清除了用戶可能已經完成的所有選擇。當然這不是OP的要求，但會導致惱人的用戶體驗我猜 –

使用.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-07 12:27:37 Anton

會刪除用戶已經做出的任何選擇 –

也許它是（沒有聲明它是錯誤的），但它會產生一個奇怪的UX –

是的，你是右側不明白你的意思，在開始 – Anton

您可以添加一行循環

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

所以之前清空追加DIV這將是：

$(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-07 12:28:18 martincarlin87

相反的：

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

使用

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

我認爲這是什麼原因造成它追加附加字段。

來源

2012-12-07 12:28:35 ProWebMonkey

，只插入一個元素（或更確切地說，除了最後一個插入的任何元素將被覆蓋） –

對不起，我沒有想到它，我會將選擇添加到然後使用$（'。append'）。html，就像上面的解決方案一樣。謝謝你讓我知道。 – ProWebMonkey

使用此重置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-07 12:29:52

爲了保持用戶已經使你可以改變藥結構的任何選擇有點

$(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-07 12:35:53

的Javascript復位循環

回答

相關問題