Helene Helene - 17 days ago 7
jQuery Question

How to show a hidden drop down based on a drop down choice

I posted last week about being able to toggle a hidden field based on a choice. I am having an issue now where, when I click on a choice from a dropdown selection, it won't hide/show the other dropdown I want displayed.

JSFiddle

I appreciate any help :)

jQuery

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


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>
<option value="Customer Care Center">Customer Care Center</option>
<option value="Corporate">Corporate</option>
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="form-group">
<label></label>
<select name="YourCenter" class="form-control select2 CCC" style="width: 100%;" required>
<option value="" disabled selected>Select Your Center</option>
<option value="Dallas">Dallas</option>
<option value="Los Angeles">Los Angeles</option>
<option value="Phoenix">Phoenix</option>
<option value="Tampa">Tampa</option>
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->

Answer

It is working but one small suggeston to improve your code.

When you hide the 2nd dropdown you should unselect the selected option first so use

$('.CCC').val(null).hide();

Otherwise even it is hidden, it is still selected and when you submit it might cause trouble and you will have bad data.

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

$(document).ready(function() {
  $('select[name="YourLocation"]').change(function() {
    if ($(this).val() == 'Customer Care Center') {
      $('.CCC').show();
    } else {
      $('.CCC').val(null).hide();
    }
  });
});
.CCC {
  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>
      <option value="Customer Care Center">Customer Care Center</option>
      <option value="Corporate">Corporate</option>
    </select>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->

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