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

时间：2017-05-08 20:37:13

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

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

的信息

我能够使用其中一个下拉选项实现它，在本例中为＃34; Branch。＆＃34;

我想在同一个应用程序中选择＆＃34; Branch，＆＃34; ＆＃34;区，＆＃34;和＆＃34;分部＆＃34;并显示我选择的相应隐藏字段。这是JSFiddle，不知道为什么我无法让它们显示：https://jsfiddle.net/4vup4dq8/

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

＆＃13;
＆＃13; 
$("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();
  }
});
＆＃13; 
<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;
}
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：3)

你有三次运行相同的功能。 

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

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

答案 1 :(得分：3)

首先：您不需要$("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中，它是默认（其他）情况。

＆＃13;
＆＃13; 
$("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();
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题