jQuery/Javascript方法用于在选择多个字段时显示/隐藏多个字段，并选择多个选择

Question

我有一个包含多个字段的表单，其中一些字段只显示某一项选择的时间，这很容易做到，但当我有许多不同选择的共同字段时，我正在挣扎的地方。

我现在可以用唯一的类或id创建重复的字段，但是这样做感觉是错误的。任何帮助都将是非常感谢的，如果这已经被问到之前，我真的很抱歉，我确实搜索没有运气。

示例代码如下：

​

$('#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>

​

Answer 1

这是一个伪代码，可能对你有帮助。因此，为每个div分配一个公共类。我已将plates-option指定为一个普通类。

现在，每个div都应该有一个类名，与option值相同(检查option)。一旦完成了这些操作，根据从下拉列表中选择的值显示/隐藏div就变得更容易了。

​

$('#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>

​

Answer 2

下面的代码可以帮助您，并且需要根据需要更改条件：

​

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

});

<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 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>

​