如何根據下拉選項顯示隱藏下拉菜單

Question

上週我發佈了關於基於選項切換隱藏區域的信息。我現在遇到問題，當我點擊下拉選項中的選項時，它不會隱藏/顯示我想要顯示的其他下拉列表。

JSFiddle

我感謝所有幫助:)

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 1

這是工作，但一個小建議，以改善您的代碼。

當你隱藏的第二個下拉菜單，你應該unselect所選擇的選項首次如此使用

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

否則即使它是隱藏的，它仍然選擇當您提交它可能會引起麻煩，你將有壞數據。

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

Answer 2

試試這個......

<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(); 
        } 
       }); 
      });