根据重复项目中的选定下拉选项隐藏/显示 Div

Question

到目前为止，我已经使用以下代码为一个元素实现了这一点：

    <div class="form-group">
     <label class="control-label">Service</label>
     <select class="form-control select2 service">
      <option>Select Service</option>
      <optgroup label="Services">
       <option value="service1">Service 1</option>
       <option>Service 2</option>
       <option>Service 3</option>
       <option value="special">Special</option>
      </optgroup>
     </select>
    </div>

    <div class="hidden-input">
     <div class="col-sm-8">
      <div class="form-group">
       <label class="control-label">Description</label>
        <textarea class="form-control" name="customDesc" rows="2">
        </textarea>
      </div>
     </div>
    </div>

    <script>
    $('.service').on('change', function () {
        var $this = $(this),
            value = $this.val();

        if (value == 'special') {
            $('.hidden-input').fadeIn(350);
        } else {
            $('.hidden-input').fadeOut(250);
        }
    });
</script>

问题是服务类选择重复，show-hidden div 也是如此，这使得在下拉列表中选择第一个“value=special”值时显示/隐藏所有“hidden-input”元素。

我尝试在针对重复元素实例的显示回调中实现相同的代码，以便在重复项中隐藏或显示隐藏元素，但没有运气：

// For service repeater
    $('.repeater').repeater({

        show: function () {
            $(this).slideDown();
            $(this).find('.select2-multiple').select2({
                placeholder: "Select Title",
                allowClear: true,
            });
            $(this).find('.select2').select2({
                placeholder: "Select Title",
                allowClear: true,
            });
            $(this).find('.service').on('change', function () {
                var $this = $(this),
                    value = $this.val();

                if (value == 'special') {
                    $('.hidden-input').fadeIn(350);
                } else {
                    $('.hidden-input').fadeOut(250);
                }
            });
        },
        hide: function (deleteElement) {
            if (confirm('Are you sure you want to delete this element?')) {
                $(this).slideUp(deleteElement);
            }
        }
    });

有什么建议吗？

Answer 1

根据 select 的更改，这是我帮助定位正确的 hidden-input 的最佳猜测；

1. 使用closest 向上移动DOM 到最近的form-group
2. 转到下一个 DOM 项，即 hidden-input
3. 切换。

$('.service').on('change', function() {
  var $this = $(this),
    value = $this.val();
  var $target = $this.closest(".form-group").next(".hidden-input"); //best guess on provided info
  if (value == 'special') {
    $target.fadeIn(350);
  } else {
    $target.fadeOut(250);
  }
});

.hidden-input{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label">Service</label>
  <select class="form-control select2 service">
      <option>Select Service</option>
      <optgroup label="Services">
       <option value="service1">Service 1</option>
       <option>Service 2</option>
       <option>Service 3</option>
       <option value="special">Special</option>
      </optgroup>
     </select>
</div>

<div class="hidden-input">
  <div class="col-sm-8">
    <div class="form-group">
      <label class="control-label">Description</label>
      <textarea class="form-control" name="customDesc" rows="2">
        </textarea>
    </div>
  </div>
</div>

<div class="form-group">
  <label class="control-label">Service</label>
  <select class="form-control select2 service">
      <option>Select Service</option>
      <optgroup label="Services">
       <option value="service1">Service 1</option>
       <option>Service 2</option>
       <option>Service 3</option>
       <option value="special">Special</option>
      </optgroup>
     </select>
</div>

<div class="hidden-input">
  <div class="col-sm-8">
    <div class="form-group">
      <label class="control-label">Description</label>
      <textarea class="form-control" name="customDesc" rows="2">
        </textarea>
    </div>
  </div>
</div>