Clone은 복제 된 선택을 복제하거나 계속 선택합니다.

Question

복제 선택 및 삭제에 문제가 있습니다.

내가 뭘 원하는거야 : 선별을 변경할 때

1. , 나는 선택을 복제 할 그래서 새로운 선택이있다.
2. 복제 된 선택을 변경하면 새로운 선택도 추가됩니다.
3. 선택은이 최대 5 개를 선택 할 수 있지만, 적어도 1 증가 숫자
4. 업데이트 라벨을 선택할 수 있습니다 총
을 제거 할 수 있습니다. 중간에있는 것이 제거되면, 모두 새로운 레이블 번호를 얻습니다.
• 을 당신은 또한 선택을 삭제할 수 있습니다 복제 후 :

내가 잘못 무엇 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 입력을 제거하면.

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