JQueryが動的選択からすべての値を集める

Question

動的選択フォームに問題があります。私は選択フィールドのすべての値を#totalに集計したいと思いますが、私はこれをどうやって行うことができないのか分かりません。私は$('select')のような多くのものを試しましたが、.each()の機能を使ったものですが、結果はありません。私のコードは以下の通りです。

<div class='input_fields_wrap'> 
    <button class='add_list_field_button'>Dodaj list</button> 
</div> 

<div id='total'></div> 

<script> 

$(document).ready(function() { 

var max_fields = 20; 
var wrapper = $('.input_fields_wrap'); 
var add_list = $('.add_list_field_button'); 
var x = 1; 

$(wrapper).on('click', ".remove_field", function(e) { 
e.preventDefault(); 
$(this).parent('div').remove(); 
x--; 
}); 

$(add_list).click(function(e) { 
    e.preventDefault(); 
    if (x < max_fields) { 
    x++; 
    $(wrapper).append("<div>" + 
         "<label for='lists'>Listy</label>" + 
         "<select name='lists' class='lists'>" + 
          "<option selected>Wybierz</option>" + 
          "<option value=1>List zwykły</option>" + 
          "<option value=2>List polecony</option>" + 
          "<option value=3>Kartka pocztowa</option>" + 
          "<option value=4>List z zadeklarowaną zawartością</option>" + 
         "</select>" + 
         "<label for='dimension'>Gabaryt</label>" + 
         "<select name='dimension class='dimension'>" + 
          "<option selected>Wybierz</option>" + 
          "<option value=1>Gabaryt A</option>" + 
          "<option value=2>Gabaryt B</option>" + 
         "</select>" + 
         "<label for='important'>Priorytet</label>" + 
         "<select name='important' class='important'>"+ 
          "<option value=1 selected>Wybierz</option>" + 
          "<option value=2>Ekonomiczna</option>" + 
          "<option value=3>Priorytetowa</option>" + 
         "</select>" + 
         "<label for='weight'>Waga</label>" + 
         "<select name='weight' class='weight'>" + 
          "<option selected>Wybierz</option>" + 
          "<option value=1>Do 350g</option>" + 
          "<option value=2>Między 350g a 1000g</option>" + 
          "<option value=3>Między 1000g a 2000g</option>" + 
         "</select>" + 
         "<a href='#' class='remove_field'>Remove</a>" + 
         "</div>"); 
    } 
}); 

</script> 

Answer 1

ここでの考え方を確認してください。（しかし、値を合計するかは不明である）

$(document).ready(function() { 
 

 
    var max_fields = 20; 
 
    var wrapper = $('.input_fields_wrap'); 
 
    var add_list = $('.add_list_field_button'); 
 
    var x = 1; 
 

 
    $(wrapper).on('click', ".remove_field", function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent('div').remove(); 
 
    x--; 
 
    }); 
 
    
 
    $(document).on('change','.weight', function() { 
 
    let vals = []; 
 
    $('.weight').each(function() { 
 
     vals.push($(this).val()); 
 
    }); 
 
    $('#total').text('I don\'t know what to do with all these values : ' + vals.join('+') + ' :)'); 
 
    }); 
 

 
    $(add_list).click(function(e) { 
 
    e.preventDefault(); 
 
    if (x < max_fields) { 
 
     x++; 
 
     $(wrapper).append("<div>" + 
 
     "<label for='lists'>Listy</label>" + 
 
     "<select name='lists' class='lists'>" + 
 
     "<option selected>Wybierz</option>" + 
 
     "<option value=1>List zwykły</option>" + 
 
     "<option value=2>List polecony</option>" + 
 
     "<option value=3>Kartka pocztowa</option>" + 
 
     "<option value=4>List z zadeklarowaną zawartością</option>" + 
 
     "</select>" + 
 
     "<label for='dimension'>Gabaryt</label>" + 
 
     "<select name='dimension class='dimension'>" + 
 
     "<option selected>Wybierz</option>" + 
 
     "<option value=1>Gabaryt A</option>" + 
 
     "<option value=2>Gabaryt B</option>" + 
 
     "</select>" + 
 
     "<label for='important'>Priorytet</label>" + 
 
     "<select name='important' class='important'>" + 
 
     "<option value=1 selected>Wybierz</option>" + 
 
     "<option value=2>Ekonomiczna</option>" + 
 
     "<option value=3>Priorytetowa</option>" + 
 
     "</select>" + 
 
     "<label for='weight'>Waga</label>" + 
 
     "<select name='weight' class='weight'>" + 
 
     "<option selected>Wybierz</option>" + 
 
     "<option value=1>Do 350g</option>" + 
 
     "<option value=2>Między 350g a 1000g</option>" + 
 
     "<option value=3>Między 1000g a 2000g</option>" + 
 
     "</select>" + 
 
     "<a href='#' class='remove_field'>Remove</a>" + 
 
     "</div>"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='input_fields_wrap'> 
 
    <button class='add_list_field_button'>Dodaj list</button> 
 
</div> 
 

 
<div id='total'></div>