克隆 select 并继续克隆或删除克隆的 select

Question

我在克隆和删除 select 时遇到问题。

我想要什么：

更改 select 时，我想克隆 select，以便有一个新的 select。
更改克隆的 select 也会添加新的 select。
可以删除选择
总共最多可以有 5 selects 但至少有 1 select
用递增的数字更新标签。如果删除中间的一个，则所有 select 都会获得新的标签编号。

我做了一个JSFiddle

出了什么问题：

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

这是我的代码：

$(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.

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

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

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>

克隆 select 并继续克隆或删除克隆的 select

Clone selects and keep on cloning or deleting a cloned select

javascript

jquery

select

clone

count