如何切换多个隐藏字段以通过CSS& Javascript? [英] How to toggle multiple hidden fields to appear via CSS & Javascript?

问题描述

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

I would like to know how to toggle multiple HTML fields to appear via a dropdown choice.

假设我有一个下拉菜单，其中有3个选项:分支"，区域"和&部门.

Let's say I have a dropdown with 3 choices: Branch, Region, & Division.

如果我选择分支"，则希望在其下方显示3个字段:分支#"，站点#"，"ID#".

If I choose Branch, I'd like 3 fields to appear below it: Branch #, Site #, ID #.

我对JavaScript的了解还很早，所以我就这样进行设置，但无法正常工作:

I'm very early in my JavaScript knowledge, so I set it up like this, but it's not working:

$('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个字段都将大有帮助！预先谢谢你.

Any help on how to restructure the JavaScript to allow me to toggle all 3 fields when one choice is made from the dropdown would be of great help! Thank you in advance.

这是下拉菜单的HTML:

This is the HTML for the Drop Down:

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

推荐答案

您可以通过使用类而不是ID来简化以下操作:

You can simplify this a lot by using a class instead of an ID like so:

$('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脚本将立即切换所有这些元素.

What you'll want to do is add the class BranchInfo to each of the elements you want to hide/show, then the jQuery script will toggle all of them at once.

这篇关于如何切换多个隐藏字段以通过CSS& Javascript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！