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

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 ] )一个布尔值，指示是否应将事件处理程序与元素一起复制。

如果您删除--selectsCount;输入，也会select。

＆＃13;

＆＃13;

$(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');
    }
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请试一试。

$(document).ready(function() {  
  $(document).on('change','.box select', function() {
    //Find total select box length
    var selectsCount = parseInt($('.box select').length);
    if (selectsCount < 5) {
      var cloned = $('.box').last().clone().insertAfter($(this).parents('.box:last'));
      cloned;
      //Update select box length
      selectsCount = parseInt($('.box select').length);
      cloned.find("label").text('Selector ' + (selectsCount));
    }
    //Update the select box label
    var _selectsCount = 1;
    $('.box label').each(function(){
      $(this).text('Selector ' + (_selectsCount++));
    });
  });
  
  //Remove the select box on remove selectbox
  $(document).on('click',".cancelSelect", function() {
    var parentBox = $(this).parents('.box');
    parentBox.find('select').prop('selectedIndex', 0);
    parentBox.remove();
    //Update the select box label
    var _selectsCount = 1;
    $('.box label').each(function(){
      $(this).text('Selector ' + (_selectsCount++));
    });
  });
});

.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/2.1.1/jquery.min.js"></script>
<div class="selectorClones">
  <div class="box">
    <div class="selectBox">
      <label>Selector 1</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>