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

时间:2016-09-29 10:52:08

标签: javascript jquery select count clone

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

我想要什么:

  1. 更改选择时,我想克隆选择,因此有一个新的选择。
  2. 更改克隆选择也会添加新选择。
  3. 可以删除选择
  4. 总共可以有最多5个选项,但至少有1个选择
  5. 使用不断增加的数字更新标签。如果中间的一个将被删除,则所有选择都会获得新的标签号。
  6. 我做了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

2 个答案:

答案 0 :(得分:0)

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;

答案 1 :(得分:0)

请试一试。

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