Helene Helene - 2 months ago 11
CSS Question

How to display multiple hidden fields based on multiple dropdown choices?

I posted the other day about how to toggle multiple hidden fields to appear via CSS & Javascript

I was able to implement it using one of the drop-down choices, in this case "Branch."

I want to, in the same application, be able to choose "Branch," "Region," and "Division" and have the corresponding hidden field that I choose, to appear. Here is the JSFiddle, not sure why I am unable to have them show: https://jsfiddle.net/4vup4dq8/

Any help would be great :) (This is the best community, you all have helped me so much!)



$("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;
}




Answer

I will explain this wait a min...

First: you don't need $("select[name='YourLocation']").on("change", function() { multiple time, you want just one event to handle all situation.

Here I used Switch, you can do it like if+else if+else if... But switch will be much simple.

The logic is by default $('.RN, .BN, .DN, .CCC').hide(); will hide everything.

And every time you change the dropdown hide everything first, then show the one you should show. In each switch case you can define each situation, and in the default it is the default(else) situation.

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

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