时间戳

首页 > 解决方案 > 使用 Jquery/Javascript 根据下拉选项删除元素

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

问题描述

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

  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>

标签： javascriptjquery

解决方案

有很多方法可以解决这个问题：

  1. 如果选择了信用卡以外的其他选项，则隐藏 4 个字段 + 从输入字段中删除所需的属性。$('.elementor-field').attr('required',false);这将允许用户提交表单。（elementor-field 我以此类为例。您可以将一个单独的类添加到要隐藏的字段中）

    1. 不是将输入字段放在 html 文件中，而是根据选择动态生成它们。

    2. 制作两个单独的表单并根据下拉选择显示和隐藏它们

推荐阅读