javascript - 如何切换多个隐藏字段以通过 CSS 和 Javascript 显示？

Question

我想知道如何切换多个 HTML 字段以通过下拉选项显示。

假设我有一个包含 3 个选项的下拉列表:Branch、Region 和 Division。

如果我选择 Branch，我希望在其下方显示 3 个字段:Branch #、Site #、ID #。

我的 JavaScript 知识还很早，所以我这样设置它，但它不起作用:

$('select[name=YourLocation]').change(function () {
    if ($(this).val() == 'Branch') {
        $('#BranchNum').show();
    } else {
        $('#BranchNum').hide();
    }
    if ($(this).val() == 'Branch') {
        $('#SiteNum').show();
    } else {
        $('#SiteNum').hide();
    }
    if ($(this).val() == 'Branch') {
        $('#IDNum').show();
    } else {
        $('#IDNum').hide();
    }
});

和CSS:

#BranchNum {
    display: none;
}

#SiteNum {
    display: none;
}

#IDNum {
    display: none;
}

任何有关如何重构 JavaScript 以允许我在从下拉列表中做出一个选择时切换所有 3 个字段的帮助都会有很大帮助!提前谢谢你。

这是下拉列表的 HTML:

<div class="col-md-3">
    <div class="form-group">
        <label>Your Location</label>
        <select name="YourLocation" class="form-control select2" style="width: 100%;" required>
            <option value="" disabled selected>Select Your Location</option>
            <option value="Branch">Branch</option>
            <option value="Region">Region</option>
            <option value="Division">Division</option>
        </select>
    </div><!-- /.form-group -->
</div><!-- /.col -->

以及隐藏字段的 HTML:

<div class="col-md-3">
    <div class="form-group">
        <label></label>
        <input type="text" class="form-control" name="BranchNumber" placeholder="Branch #" id="BranchNum">
    </div>
</div><!-- /.col -->

<div class="col-md-3">
    <div class="form-group">
        <label></label>
        <input type="text" class="form-control" name="SiteNumber" placeholder="Region #" id="SiteNum">
    </div>
</div><!-- /.col -->

<div class="col-md-3">
    <div class="form-group">
        <label></label>
        <input type="text" class="form-control" name="IDNumber" placeholder="Division #" id="IDNum">
    </div>
</div><!-- /.col -->

Answer 1

你可以通过使用一个类而不是像这样的 ID 来简化这个:

$('select[name=YourLocation]').change(function() {
  if ($(this).val() == 'Branch') {
    $('.BranchInfo').show();
  } else {
    $('.BranchInfo').hide();
  }
});

.BranchInfo {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3">
  <div class="form-group">
    <label>Your Location</label>
    <select name="YourLocation" class="form-control select2" style="width: 100%;" required>
      <option value="" disabled selected>Select Your Location</option>
      <option value="Branch">Branch</option>
      <option value="Region">Region</option>
      <option value="Division">Division</option>
    </select>
  </div>
  <!-- /.form-group -->
</div>

<div class="col-md-3">
  <div class="form-group">
    <label></label>
    <input type="text" class="form-control BranchInfo" name="BranchNumber" placeholder="Branch #" id="BranchNum">
  </div>
</div>
<!-- /.col -->

<div class="col-md-3">
  <div class="form-group">
    <label></label>
    <input type="text" class="form-control BranchInfo" name="SiteNumber" placeholder="Region #" id="SiteNum">
  </div>
</div>
<!-- /.col -->

<div class="col-md-3">
  <div class="form-group">
    <label></label>
    <input type="text" class="form-control BranchInfo" name="IDNumber" placeholder="Division #" id="IDNum">
  </div>
</div>

您需要做的是将类 BranchInfo 添加到您想要隐藏/显示的每个元素，然后 jQuery 脚本将立即切换所有元素。