jQuery/Javascript方法，用于在选择时显示/隐藏多个字段，并将公共字段显示为多个选择 [英] jQuery/Javascript method to show/hide multiple fields upon selection with common fields to multiple selections

问题描述

我有一个包含多个字段的表单，其中一些仅在做出特定选择时才显示，这很容易做到，但是当我遇到的通用字段却在不同选择上有很多显示时，我却在苦苦挣扎.

I have a form with multiple fields, some of which only show when a certain selection is made, that is easy enough to do but where I am struggling is when I have common fields which much show on different selections.

我现在可以使用唯一的类或ID来创建重复的字段，但这似乎是错误的方法.任何帮助将不胜感激，如果真的对不起您的要求，我确实没有进行过搜索.

I now I can make duplicate fields with unique classes or id's but that feels like the wrong way to do it. Any help will be greatly appreciated and if this has been asked before I am genuinely sorry, I did search with no luck.

示例代码如下:

$('#order_type').on('change', function() {
      if ($(this).val() === "plates_stepped") {
        $(".stepped").show("slow");
      } else {
        $("#plate_qty").val(0);
        $("#plate_thickness").val(0);
        $("#plate_wrong_reading").val(0);
        $("#plate_right_reading").val(0);
        $(".stepped").hide("slow");
      };
      if ($(this).val() === "plates_not_stepped") {
        $(".not_stepped").show("slow");
        $(".common_plates").show("slow");
      } else {
        $(".not_stepped").val(0);
        $(".not_stepped").hide("slow");
        $(".common_plates").hide("slow");
      };

<div class="form-group row">
  <label for="order_type" class="col-3 col-form-label">What would you like us to provide?</label>
  <div class="col-9">
    <select class="form-control" id="order_type" required>
                        <option value="0">Please select...</option>
                        <option value="plates_stepped">Direct - Plates (I have stepped)</option>
                        <option value="plates_not_stepped">Direct - Plates (Step for me)</option>
                        <option value="plates_remake">Direct - Plates Remake</option>
                        <option value="proof_only">Proof Only</option>
                        <option value="acme_traditional">Acme Traditional</option>
                    </select>
  </div>
</div>
<div class="form-group row stepped common_plates" style="display: none;">
  <label for="plate_qty" class="col-3 col-form-label">Total Plates To Make</label>
  <div class="col-9">
    <input class="form-control" type="number" placeholder="4" id="plate_qty" required>
  </div>
</div>
<div class="row form-group radio-field is-required stepped common_plates" style="display: none;">
  <label class="col-3 col-form-label">Plates Thickness?</label>
  <div class="radio custom-radio form-check-inline col-9">
    <input checked="checked" name="plate_thickness" value="1" type="radio" id="45th">
    <label for="45th">1.14mm - 45th.</label>
    <input name="plate_thickness" value="2" type="radio" id="67th">
    <label for="67th">1.70mm - 67th.</label>
  </div>
</div>
<div class="row form-group radio-field is-required stepped common_plates" style="display: none;">
  <label class="col-3 col-form-label">Mirror Plates?</label>
  <div class="radio custom-radio form-check-inline col-9">
    <input checked="checked" name="plate_reading" value="1" type="radio" id="plate_right_reading">
    <label for="plate_right_reading">Right reading</label>
    <input name="plate_reading" value="2" type="radio" id="plate_wrong_reading">
    <label for="plate_wrong_reading">Wrong Reading</label>
  </div>
</div>
<div class="form-group row not_stepped" style="display: none;">
  <label for="teeth_qty" class="col-3 col-form-label">Teeth quantity</label>
  <div class="col-9">
    <input class="form-control" type="number" placeholder="92" id="teeth_qty" required>
  </div>
</div>
<div class="row form-group radio-field is-required not_stepped" style="display: none;">
  <label class="col-3 col-form-label">Gear Type</label>
  <div class="radio custom-radio form-check-inline col-9">
    <input checked="checked" name="gear_type" value="1" type="radio" id="1_8cp">
    <label for="1_8cp">1/8CP</label>
    <input name="gear_type" value="2" type="radio" id="31dp">
    <label for="31dp">32 DP</label>
  </div>
</div>

推荐答案

这是一个伪代码，可能会对您有所帮助.因此，为每个div分配一个通用类.我已将plates-option分配为通用类.

This is a pseudo code that might help you. So assign a common class to each of your div. I have assigned plates-option as a common class.

现在，每个div还应该具有一个与option值相同的类名(检查HTML ).一旦完成此操作，就可以根据从下拉列表中选择的值来显示/隐藏div.

Now, each of this div should also have a class name, same as the option values (check the HTML). Once, you do this things, it becomes easier to show/hide the div's based on the value selected from the drop-down.

$('#order_type').change(function() {
  $("div.plates-options").hide();
  $("div." + $(this).val()).show();
});

$(document).ready(function() {
  $('#order_type').trigger('change');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
  <label for="order_type" class="col-3 col-form-label">What would you like us to provide?</label>
  <div class="col-9">
    <select class="form-control" id="order_type" required>
<option value="0">Please select...</option>
<option value="plates_stepped">Direct - Plates (I have stepped)</option>
<option value="plates_not_stepped">Direct - Plates (Step for me)</option>
<option value="plates_remake">Direct - Plates Remake</option>
<option value="proof_only">Proof Only</option>
<option value="acme_traditional">Acme Traditional</option>
</select>
  </div>
</div>
<div class="form-group plates-options row plates_stepped common_plates">
  plates_stepped & common plates
</div>
<div class="form-group plates-options row plates_not_stepped common_plates">
  plates_not_stepped & common plates
</div>
<div class="form-group plates-options row plates_remake">
  plates_remake
</div>
<div class="form-group plates-options row proof_only">
  proof_only
</div>
<div class="form-group plates-options row acme_traditional common_plates">
  acme_traditional & common plates
</div>

这篇关于jQuery/Javascript方法，用于在选择时显示/隐藏多个字段，并将公共字段显示为多个选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！