2016-09-29 150 views
1

我遇到克隆选择和删除问题。克隆选择并继续克隆或删除克隆的选择

我想要什么:

  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

回答

0

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>

+0

谢谢你,这么近又那么远!所以有一个问题留下来,这是1选择必须留下来,不能删除+删除选择后更新数字。 – Teezii

+0

@Teezii - 你能多解释一下... – Rayon

+0

现在我们可以删除所有的选择。我想要的是你可以删除所有选择,但是1,但是删除哪一个并不重要。删除选择必须再次更新号码。 – Teezii

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>

+0

非常感谢Rahul! – Teezii

+0

@Teezii您将能够检查片段中的选择框可以被克隆到5,并且在删除或添加任何选择框的任何地方,任何选择框的标签将被更新。 –

+0

@Rayon删除它。但是在我成功解决了SO的问题之后,我已经评论过了。 –