如何根据多个下拉选项显示多个隐藏字段？答案

【问题标题】：How to display multiple hidden fields based on multiple dropdown choices?如何根据多个下拉选项显示多个隐藏字段？
【发布时间】：2017-05-08 20:37:12
【问题描述】：

前几天我发布了关于如何切换multiple hidden fields to appear via CSS & Javascript

我能够使用下拉选项之一来实现它，在本例中为“分支”。

我希望在同一个应用程序中能够选择“分支”、“区域”和“部门”，并让我选择的相应隐藏字段出现。这是 JSFiddle，不知道为什么我无法让它们显示：https://jsfiddle.net/4vup4dq8/

任何帮助都会很棒:)（这是最好的社区，你们都帮了我很多！）

$("select[name='YourLocation']").on("change", function() {
  console.log($(this).val())
  if ($(this).val() == 'Branch') {
    $('.RN').show();
    $('.BN').show();
    $('.DN').show();
  } else {
    $('.RN').hide();
    $('.BN').hide();
    $('.DN').hide();
  }
});

$("select[name='YourLocation']").on("change", function() {
  console.log($(this).val())
  if ($(this).val() == 'Region') {
    $('.RN').show();
    $('.DN').show();
  } else {
    $('.RN').hide();
    $('.DN').hide();
  }
});

$("select[name='YourLocation']").on("change", function() {
  console.log($(this).val())
  if ($(this).val() == 'Division') {
    $('.DN').show();
  } else {
    $('.DN').hide();
  }
});

$("select[name='YourLocation']").on("change", function() {
  console.log($(this).val())
  if ($(this).val() == 'Customer Care Center') {
    $('.CCC').show();
  } else {
    $('.CCC').hide();
  }
});

<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>
          <option value="Customer Care Center">Customer Care Center</option>
          <option value="Corporate">Corporate</option>
        </select>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->

<div class="row">
  <div class="col-md-3">
    <div class="form-group">
      <label></label>
      <input type="text" class="form-control BN" 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 RN" name="RegionNumber" placeholder="Region #" id="RegionNum">
    </div>
  </div>
  <!-- /.col -->

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

  <div class="col-md-3">
    <div class="form-group">
      <label></label>
      <select name="YourCenter" class="form-control select2 CCC" style="width: 100%;" id="CCC" required>
            <option value="" disabled selected>Select Your Center</option>
            <option value="Dallas">Dallas</option>
            <option value="Las Vegas">Las Vegas</option>
            <option value="Phoenix">Phoenix</option>
            <option value="Tampa">Tampa</option>
          </select>
    </div>
    <!-- /.form-group -->
  </div>
  <!-- /.col -->
</div>
<!-- /.row -->

.BN {
  display: none;
}

.RN {
  display: none;
}

.DN {
  display: none;
}

.CCC {
  display: none;
}

【问题讨论】：

你的问题是什么？似乎对我有用？
当我选择“Branch”时，我希望显示“Branch #”、“Division #”和“Region #”。当我选择“地区”时，我想要“分区#”和“地区#”，当我选择“分区”时，我希望出现“分区#”。但是当我单击“分支”或“区域”时，只会出现一个选择。 jsfiddle.net/4vup4dq8
您在同一个元素上绑定了 3 次更改事件。您需要在一个绑定事件中执行您的逻辑。
@Helene 好的，检查我的解决方案。
谢谢丹尼尔 :)

标签： javascript jquery html css model-view-controller

【解决方案1】：

第一：您不需要$("select[name='YourLocation']").on("change", function() {} ); 多次，您需要一个事件处理程序用于所有情况。

这里我用了switch，你可以像if+else if+else if那样做。但是switch 要简单得多。

默认逻辑是$('.RN, .BN, .DN, .CCC').hide();会隐藏一切。

请注意，您可以像这样组合多个选择器：

$('.RN').show();
$('.BN').show();
$('.DN').show();

/* equals to */
$('.RN, .BN, .DN').show();

每次更改下拉菜单时，请先隐藏所有内容。然后展示你应该展示的那个。在每个开关case 中，您可以定义每种情况，在default 中，它是默认（其他）情况。

$("select[name='YourLocation']").on("change", function() {
  $('.RN, .BN, .DN, .CCC').hide();
  switch ($(this).val()) {
    case 'Branch':
      $('.RN, .BN, .DN').show();
      break;
    case 'Region':
      $('.RN').show();
      $('.DN').show();
      break;
    case 'Division':
      $('.DN').show();
      break;
    case 'Customer Care Center':
      $('.CCC').show();
      break;
  }
});

//init
$('.RN, .BN, .DN, .CCC').hide();

<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>
          <option value="Customer Care Center">Customer Care Center</option>
          <option value="Corporate">Corporate</option>
        </select>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->

<div class="row">
  <div class="col-md-3">
    <div class="form-group">
      <label></label>
      <input type="text" class="form-control BN" 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 RN" name="RegionNumber" placeholder="Region #" id="RegionNum">
    </div>
  </div>
  <!-- /.col -->

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

  <div class="col-md-3">
    <div class="form-group">
      <label></label>
      <select name="YourCenter" class="form-control select2 CCC" style="width: 100%;" id="CCC" required>
            <option value="" disabled selected>Select Your Center</option>
            <option value="Dallas">Dallas</option>
            <option value="Las Vegas">Las Vegas</option>
            <option value="Phoenix">Phoenix</option>
            <option value="Tampa">Tampa</option>
          </select>
    </div>
    <!-- /.form-group -->
  </div>
  <!-- /.col -->
</div>
<!-- /.row -->

【讨论】：

非常感谢您的回复 :) 我会试试这个。感谢您的帮助！
@Helene 乐于助人

【解决方案2】：

相同的函数运行了 3 次。

$("select[name='YourLocation']").on("change", function()...

当您选择“分支”时，它会第一次运行并显示所有三个。然后它运行第二次和第三次，并隐藏第二次。您需要将您的逻辑组合到一个函数中。将后两个函数注释掉，选择“Branch”就可以看到了。

【讨论】：

是的，我注意到只做一次就可以了。我怎样才能将它结合起来，以便它与我试图显示它的方式一起工作？谢谢你:)