JQuery添加select字段没有重复

时间:2017-03-02 12:04:37

标签: javascript jquery

如何通过在JQuery中添加新的选择字段来避免重复?我想在现有的地方添加一个新的选择字段,但没有重复。我怎样才能做到这一点?请在下面找到我的代码。提前谢谢!



$(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', '.dimension_NL', function() {
    var i;
    total = 0;
    let vals = [];
    $('.dimension_NL').each(function() {
      vals.push($(this).val());
    });
    for (i = 0; i < vals.length; i++) {
      total += parseInt(vals[i]);
    }
    $('#total').text('I don\'t know what to do with all these values : ' + total);
  });

  $(add_list).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append("<div>" +
        "<label>List zwykły</label>" +
        "<label for='dimension_NL'>Gabaryt</label>" +
        "<select name='dimension_NL' class='dimension_NL'>" +
        "<option value='0' selected>Wybierz</option>" +
        "<option value='1'>Gabaryt A</option>" +
        "<option value='2'>Gabaryt B</option>" +
        "</select>" +
        "</div>" +
        "<a href='#' class='remove_field'>Remove</a>"
      );
    }
  });

  $(document).on('change', '.dimension_NL', function() {
    var parent = $(this).val();
    switch (parent) {
      case '1':
        $(this).parent('div').append(
          "<label for='priority_NL'>Priorytet</label>" +
          "<select name='priority_NL'   class='priority_NL'>" +
          "<option value='0' selected>Wybierz</option>" +
          "<option value='1'>Priorytet</option>" +
          "<option value='2'>Ekonomiczny</option>" +
          "</select>"
        );
        break;
    }
  });

});
&#13;
<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'>List zwykły</button>
</div>

<div id='total'></div>
&#13;
&#13;
&#13;

0 个答案:

没有答案