Question

我有一个下拉列表，允许选择多个产品，并且基于所选产品，我希望显示额外产品的输入，并向这些输入添加必填属性。

var products = $('#products').select2({
    tags: true
});

products.on('change', function() {
  var ids = products.val();
  setExtras(ids);
});

function setExtras(ids) {
  $.each(ids, function(index, id) {
    $('#extras .form-group').each(function() {
      if ($(this).hasClass('extra_' + id)) {
        $(this).show('fade').find('input').prop('required', true);
      } else {
        $(this).hide('fade').find('input').prop('required', false);
      }
    });
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6/js/select2.min.js"></script>
<div class="form-group">

  <label for="products">Products</label>
  <select multiple="" class="form-control select2" name="products[]" id="products">
    <option value="1">Product One</option>
    <option value="2">Product Two</option>
  </select>
  <span class="help-block">Please select your product</span>

</div>

<div id="extras">

  <div style="display: none;" class="form-group extra_1">
    <label for="1_1">
      Product One(Message)
      </label>
    <input type="text" class="form-control" id="1_1" name="extras[1][1]" placeholder="Your message here">
  </div>

  <div style="display: none;" class="form-group extra_2">
    <label for="2_2">
      Product Two(Message)
      </label>
    <input type="text" class="form-control" id="2_2" name="extras[2][2]" placeholder="Your message here">
  </div>

  <div style="display: none;" class="form-group extra_2">
    <label for="2_3">
      Product Two(Tag Line)
      </label>
    <input type="text" class="form-control" id="2_3" name="extras[2][3]" placeholder="Your tag line here">
  </div>

</div>

我当前的JS代码仅显示最后选择的产品的输入，请帮我解决该问题。

PS 。产品额外费用将是可变的，某些产品有一个或多个额外费用，有些则没有。

Answer 1

您可以尝试更改功能setExtras的代码

function setExtras(ids) {
   $('#extras .form-group').each(function () {
      $(this).hide('fade').find('input').prop('required', false);
    });
   $.each(ids, function (index, id) {
    $('#extras .form-group').each(function () {
        if ($(this).hasClass('extra_' + id)) {
            $(this).show('fade').find('input').prop('required', true);
        } 
    });
   });
}

这是一个演示链接：https://codepen.io/phuongnm153/pen/PvwoZg

jQuery基于多个选择选项显示/隐藏输入

1 个答案: