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

我一直在努力的是能够限制可以添加的选择字段的数量。我添加data-limit="2"尝试编写一些引用数据值的JS，并根据值设置 limit 。

任何想法从哪里开始？

我尝试了以下内容，但我不知道为什么它不起作用：

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

也许有点丑陋的解决方案，但你可以用它作为基础。我会将数据限制放在select字段之外的某个地方，可能是多字段，~~，这样你就可以创建一个函数来访问multi-field.length和data-limit in add and remove clicks~~
编辑：简化了一点并修复了，当删除选择时，它应该小于限制，所以我们不需要计算选择框..
EDIT2：现在您可以根据需要使用任意数量的选择框

＆＃13;

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

＆＃13;

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

＆＃13;

限制基于数据元素的动态表单字段

1 个答案: