javascript - 克隆选择并继续克隆或删除克隆的选择

Question

我在克隆选择和删除它们时遇到问题。

我想要什么:

1. 更改选择时，我想克隆该选择，以便有一个新的选择。
2. 更改克隆的选择也会添加新的选择。
3. 可以删除选择
4. 总共最多可以选择 5 个，但至少有 1 个选择
5. 更新标签数量的增加。如果中间的一个被删除，所有选择都会获得新的标签号。

我做了一个JSFiddle

出了什么问题:

• 克隆后，您还可以删除选择。它可以是任何选择，但必须始终有 1 个无法删除的选择。删除克隆也必须更新数字。

这是我的代码:

$(document).ready(function() {
    var selectsCount = 1;
    $('.box label').text('Selector ' + (selectsCount++));
    $('.box select').on('change', function() {
        if (selectsCount < 5) {
            var cloned =    $('.box').last().clone(true).insertAfter($(this).parents('.box:last'));
            cloned;
            cloned.find("label").text('test Selector ' + (selectsCount++));
        }
    });

    $(".cancelSelect").on('click', function() {
        var parentBox = $(this).parents('.box');
        parentBox.find('select').prop('selectedIndex', 0);
        parentBox.remove();
    });
});

查看我的JSFiddle

Answer 1

将 true 作为参数传递给 jQuery.clone(true)

.clone( [withDataAndEvents ] ) A Boolean indicating whether event handlers should be copied along with the elements.

如果您删除 select 输入，还有 --selectsCount;。

$(document).ready(function() {
  function updateLabel() {
    $('.selectBox label').each(function(index) {
      this.textContent = 'test Selector ' + (index + 1);
    });
  }
  var selectsCount = 1;
  $('.box label').text('Selector ' + (selectsCount++));
  $('.box select').on('change', function() {
    if (selectsCount < 5) {
      var cloned = $('.box').last().clone(true).insertAfter($(this).parents('.box:last'));
      cloned.find("label").text('test Selector ' + (selectsCount++));
      updateLabel();
    }
  });

  $(".cancelSelect").on('click', function() {
    if ($('.selectBox').length > 1) {
      var parentBox = $(this).parents('.box');
      parentBox.find('select').prop('selectedIndex', 0);
      parentBox.remove();
      --selectsCount;
      updateLabel();
    } else {
      alert('Can not delete all');
    }
  });
});

.box {
  overflow: hidden;
  margin-bottom: 10px;
}
label,
select {
  display: block;
  margin-bottom: 3px;
}
.selectBox {
  float: left;
  display: inline-block;
  margin-right: 10px;
}
.cancelSelect {
  float: left;
  display: inline-block;
  color: red;
  font-weight: 700;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="selectorClones">
  <div class="box">
    <div class="selectBox">
      <label></label>
      <select class="select1" name="select1">
        <option value="first">First choice</option>
        <option value="second">Second choice</option>
        <option value="third">Third choice</option>
      </select>
    </div>
    <div class='cancelSelect'>
      X
    </div>
  </div>
</div>