javascript - 使用 Jquery/Javascript 根据下拉选项删除元素

Question

我有一个带有下拉菜单和一些文本字段的表单。如果选择下拉菜单中的选项之一，我希望表单删除文本区域。因此，如果选择了信用卡选项，那么才会出现这四个字段。

1. 卡号
2. CVV 代码
3. 到期日期
4. 卡上的姓名

如果未选择任何选项或选择 Paypal，则应删除上述 4 个字段。隐藏它们是不够的，因为它们是必填字段，因此单独隐藏它们将不允许用户提交表单。

下面是完整的代码。由于代码比较乱，我整理了一下:https://jsfiddle.net/lindychen/ow8zq1y6/28/

谢谢。

  <label for="form-field-field_5" class="elementor-field-label">Payment Method</label>
  <div class="elementor-field elementor-select-wrapper ">
    <select name="form_fields[field_5]" id="form-field-field_5" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
      <option value=""></option>
      <option value="Paypal">Paypal</option>
      <option value="Credit Card">Credit Card</option>
    </select>
  </div>
</div>

<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_6 elementor-col-100 elementor-field-required">
  <label for="form-field-field_6" class="elementor-field-label">Card Number</label><input type="number" name="form_fields[field_6]" id="form-field-field_6" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Card Number" required="required" aria-required="true"> </div>

<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_7 elementor-col-100 elementor-field-required">
  <label for="form-field-field_7" class="elementor-field-label">CVV Code</label><input type="number" name="form_fields[field_7]" id="form-field-field_7" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="CVV Code" required="required" aria-required="true"> </div>

<div class="elementor-field-type-date elementor-field-group elementor-column elementor-field-group-field_8 elementor-col-100 elementor-field-required">
  <label for="form-field-field_8" class="elementor-field-label">Expiry Date</label><input type="text" name="form_fields[field_8]" id="form-field-field_8" class="elementor-field elementor-size-sm elementor-field-textual elementor-date-field flatpickr-input" required="required" aria-required="true"> </div>

<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_9 elementor-col-100 elementor-field-required">
  <label for="form-field-field_9" class="elementor-field-label">Name on card</label><input size="1" type="text" name="form_fields[field_9]" id="form-field-field_9" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="NAME ON CARD" required="required" aria-required="true"> </div>

Answer 1

如果我理解正确的话。您只想根据所选的付款选项显示/隐藏带有必填字段的信用卡详细信息。 (例如信用卡)

您的 jQuery 选择器层次结构不正确，并且无法正常工作。 因为您不想更新您的 HTML/CSS。我已经修复了你的 jQuery 代码。工作JSFIDDLE is here .

我还更新了以下代码片段。

$(document).ready(function() {
  $('#form-field-field_5').change(function() {


    if ($('#form-field-field_5 option:selected').val().toString() === "Credit Card") {

      // Show credit card details
      $('.elementor-field-group-field_6, .elementor-field-group-field_7, .elementor-field-group-field_8, .elementor-field-group-field_9').show();

      // Add required attribute

      $('#form-field-field_6, #form-field-field_7, #form-field-field_8, #form-field-field_9').attr("required", "required");

    } else {
      // Hide credit card details
      $('.elementor-field-group-field_6, .elementor-field-group-field_7, .elementor-field-group-field_8, .elementor-field-group-field_9').hide();

      // remove required attribute

      $('#form-field-field_6, #form-field-field_7, #form-field-field_8, #form-field-field_9').removeAttr("required");
    }
  });
});

.elementor-field-type-number.elementor-field-group.elementor-column.elementor-field-group-field_6.elementor-col-100.elementor-field-required,
.elementor-field-type-number.elementor-field-group.elementor-column.elementor-field-group-field_7.elementor-col-100.elementor-field-required,
.elementor-field-type-date.elementor-field-group.elementor-column.elementor-field-group-field_8.elementor-col-100.elementor-field-required,
.elementor-field-type-text.elementor-field-group.elementor-column.elementor-field-group-field_9.elementor-col-100.elementor-field-required {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="elementor-field-type-select elementor-field-group elementor-column elementor-field-group-field_5 elementor-col-100 elementor-field-required">
  <label for="form-field-field_5" class="elementor-field-label">Payment Method</label>
  <div class="elementor-field elementor-select-wrapper ">
    <select name="form_fields[field_5]" id="form-field-field_5" class="elementor-field-textual elementor-size-sm" required="required" aria-required="true">
      <option value=""></option>
      <option value="Paypal">Paypal</option>
      <option value="Credit Card">Credit Card</option>
    </select>
  </div>
</div>

<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_6 elementor-col-100 elementor-field-required">
  <label for="form-field-field_6" class="elementor-field-label">Card Number</label><input type="number" name="form_fields[field_6]" id="form-field-field_6" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Card Number" required="required"
    aria-required="true"> </div>

<div class="elementor-field-type-number elementor-field-group elementor-column elementor-field-group-field_7 elementor-col-100 elementor-field-required">
  <label for="form-field-field_7" class="elementor-field-label">CVV Code</label><input type="number" name="form_fields[field_7]" id="form-field-field_7" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="CVV Code" required="required"
    aria-required="true"> </div>

<div class="elementor-field-type-date elementor-field-group elementor-column elementor-field-group-field_8 elementor-col-100 elementor-field-required">
  <label for="form-field-field_8" class="elementor-field-label">Expiry Date</label><input type="text" name="form_fields[field_8]" id="form-field-field_8" class="elementor-field elementor-size-sm elementor-field-textual elementor-date-field flatpickr-input"
    required="required" aria-required="true"> </div>

<div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_9 elementor-col-100 elementor-field-required">
  <label for="form-field-field_9" class="elementor-field-label">Name on card</label><input size="1" type="text" name="form_fields[field_9]" id="form-field-field_9" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="NAME ON CARD"
    required="required" aria-required="true"> </div>