克隆選擇並繼續克隆或刪除克隆的選擇

Question

我遇到克隆選擇和刪除問題。

我想要什麼：

1. 當改變一個選擇，我要克隆的選擇所以有一個新的選擇。
2. 更改克隆選擇也會添加一個新選擇。
3. 選擇可被移除
4. 總共可存在最多5個選擇，但至少1選擇具有增加的數字
5. 更新標籤。如果中間的一個將被刪除，則所有選擇都將獲得新的標籤號碼。

我做了一個JSFiddle

錯在：

• 克隆，你也可以選擇刪除後。它可以是任何選擇，但必須始終有一個不能刪除的選擇。刪除克隆也必須更新數字。

這裏是我的代碼：

$(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輸入。

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