每次单击添加时如何添加HTML依赖选择框？

Question

我在stackoverflow上找到了下面的代码，但是如何添加值？在这种情况下，值和名称都使用“ lcn”变量。我想基于value.and进行计算。名称应该是文本，当我单击添加新项时，我也想添加新的选择项。有人可以帮我吗？

$(document).ready(function() {
  $('select[name*="[]"]').each(function() {

    var attribute = {
      'shoes': ['standard'],
      'trous': ['male', 'female'],
      'shirt': ['blue', 'red', 'green', 'brown', 'yellow'],
      'hoodie': ['blue', 'red'],
    }



    var size = {
      'shoes': ['35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46'],
      'trous': ['44', '46', '48', '50', '52', '54', '56', '58', '60', '62', '64'],
      'shirt': ['S', 'M', 'L', 'XL', 'XXL'],
      'hoodie': ['S', 'M', 'L', 'XL', 'XXL'],
    }


    $('select[name*="[]"]').change(function() {
      var $attribute = $(this).next('.attribute');
      var $size = $(this).next('.attribute').next('.size');

      var product = $(this).val(),
        lcns = attribute[product] || [];
      var product22 = $(this).val(),
        lcns22 = size[product] || [];

      var html = $.map(lcns, function(lcn) {
        return '<option value="' + lcn + '">' + lcn + '</option>'
      }).join('');


      var html2 = $.map(lcns22, function(lcn) {
        return '<option value="' + lcn + '">' + lcn + '</option>'
      }).join('');

      $attribute.html(html);
      $size.html(html2);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>