CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Helene
Helene

Reputation: 83

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

Upvotes: 1

Views: 69

Answers (2)

Dalin Huang
Dalin Huang

Reputation: 11342

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

Upvotes: 1

abdul
abdul

Reputation: 360

Try this......

 <select id="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>
    $(document).ready(function () {
                $('#YourLocation').change(function () 
                {
                    if ($(this).val() == 'Customer Care Center') {
                        $('.CCC').show();
                    } else {
                        $('.CCC').hide();
                    }
                });
            });

Upvotes: 0

Related Questions