Grenze dynamische Formularfelder basierend auf Datenelement

Question

Ich habe den folgenden Code, der das Hinzufügen und Entfernen von Auswahlfeldern dynamisch erlaubt:

Hier ist der 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> 

Hier ist die 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(); 
     }); 
}); 

Mit was ich gekämpft habe, ist die Möglichkeit, die Anzahl der Auswahlfelder zu begrenzen, die hinzugefügt werden können. Ich fügte data-limit="2" in Versuchen hinzu, einige JS zu schreiben, die auf den Datenwert verweisen, und setzt das Limit basierend auf dem Wert fest.

Irgendwelche Ideen, wo ich anfangen soll?

habe ich versucht, die folgenden, die ich weiß nicht, warum es nicht funktioniert:

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

Vielleicht ein bisschen hässlich Lösung, aber man kann es als Basis verwenden. Ich würde Datenlimit irgendwo außerhalb des Auswahlfeldes setzen, vielleicht zu Multi-Feldern, , so dass Sie eine Funktion erstellen können, um multi-field.length und data-limit in add hinzuzufügen und Klicks zu entfernen EDIT: vereinfacht ein bisschen und fixiert ist, wenn die Auswahl zu entfernen, sollte es weniger als Grenze, so brauchen wir nicht Auswahlboxen zu zählen ..
EDIT2: jetzt können Sie so viele Auswahlboxen verwenden, wie Sie wollen

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