極限動態表單域

Question

我有以下的代碼，允許添加和動態選擇字段的去除：

下面是HTML：

<div class="multi-field-wrapper"> 
     <div class="multi-fields"> 
     <div class="multi-field"> 

<select class="input-normal selection"name="options1[]" data-limit="2"> 
<option value="">None</option> 
<option value="option1">Option 1</option> 
</select> 

    <button type="button" class="remove-field">X</button> 
    </div></div> 


<button type="button" class="add-field">Add</button> 
    </div> 


<div class="multi-field-wrapper"> 
     <div class="multi-fields"> 
     <div class="multi-field"> 

<select class="input-normal selection"name="options2[]" data-limit="3"> 
<option value="">None</option> 
<option value="option1">Option 1</option> 
</select> 

    <button type="button" class="remove-field">X</button> 
    </div></div> 


<button type="button" class="add-field">Add</button> 
    </div> 

這裏是JS：

$('.multi-field-wrapper').each(function() { 
     var $wrapper = $('.multi-fields', this); 
     $(".add-field", $(this)).click(function(e) { 
      $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
     }); 
     $('.multi-field .remove-field', $wrapper).click(function() { 
      if ($('.multi-field', $wrapper).length > 1) 
       $(this).parent('.multi-field').remove(); 
     }); 
}); 

我一直在掙扎是限制可添加選擇字段數量的能力。我在嘗試寫一些JS引用的數據值，並基於價值限制添加data-limit="2"。

任何想法從哪裏開始？

我試過，我不知道爲什麼它不工作的情況如下：

var article = document.getElementByClass('multi-fields'); 
var len = $(".multi-field-wrapper").find(".multi-fields").length; 
     if(len == article.dataset.limit){ 
      $('#add-field').hide(); 
     } 
    }); 
}); 

Answer 1

也許有點醜陋的解決方案，但你可以使用它作爲一個基地。我會把數據限制之外選擇欄的某個地方，也許到多領域， 這樣你就可以創建一個函數來訪問多field.length和數據限制在添加和移除點擊
編輯：簡化了一下固定，消除選擇時，應小於限值，所以我們並不需要計數選擇框..
EDIT2：現在你可以爲你想

$('.multi-field-wrapper').each(function() { 
 
    var $wrapper = $('.multi-fields', this); 
 
    $(".add-field", $(this)).click(function(e) { 
 
    limit = $('.selection', $wrapper).length + 1; 
 
    $select = $('.multi-field:first-child', $wrapper); 
 
    if(limit < $select.find('.selection').data('limit')) 
 
     $(this).show(); 
 
    else $(this).hide(); 
 
    $select.clone(true).appendTo($wrapper).find('input').val('').focus(); 
 
    }); 
 
    $('.multi-field .remove-field', $wrapper).click(function() { 
 
    if ($('.multi-field', $wrapper).length > 1) { 
 
     $(this).closest('.multi-field-wrapper').find('.add-field').show(); 
 
     $(this).parent('.multi-field').remove(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="multi-field-wrapper"> 
 
    <div class="multi-fields"> 
 
    <div class="multi-field"> 
 
     <select class="input-normal selection" name="options1[]" data-limit="3"> 
 
     <option value="">None</option> 
 
     <option value="option1">Option 1x</option> 
 
     </select> 
 

 
     <button type="button" class="remove-field">X</button> 
 
    </div> 
 
    </div> 
 
    
 
    <button type="button" class="add-field">Add</button> 
 
</div> 
 

 
<div class="multi-field-wrapper"> 
 
    <div class="multi-fields"> 
 
    <div class="multi-field"> 
 
     <select class="input-normal selection" name="options2[]" data-limit="5"> 
 
     <option value="">None</option> 
 
     <option value="option1">Option 2x</option> 
 
     </select> 
 

 
     <button type="button" class="remove-field">X</button> 
 
    </div> 
 
    </div> 
 

 
    <button type="button" class="add-field">Add</button> 
 
</div>

使用盡可能多的選擇框