2017-05-08 286 views
1

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

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

固定https://jsfiddle.net/jq08398t/2/ – Hackerman

+0

哇,謝謝。這個問題是什麼? – Helene

+0

是的,代碼很好,只有jQuery缺少哈哈。 – skobaljic

回答

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

0

試試這個......

<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(); 
        } 
       }); 
      }); 
相關問題