如何根据下拉选项显示隐藏下拉菜单

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