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>

JQuery从动态选择中收集所有值

1 个答案: