Javascript 使用jQuery基于表单选择值隐藏/显示内容

我正在尝试使用jQuery显示隐藏内容。我正在使用的代码对收音机/复选框非常有效，但对选择选项不起作用。加载页面时，内容将隐藏，但从“选择”组中选择关联选项时，内容不会显示

jQuery

$("#tabText").css("display","none");
$("#tabWebsite").css("display","none");

$("#tabTypeSelect").click(function(){
   if ($('input[name=tabType]:selected').val() == "text" ) {
      $("#tabText").slideDown("fast");
   } 
   else if ($('input[name=tabType]:selected').val() == "url" ) {    
      $("#tabWebsite").slideDown("fast");
   } 
   else {
      $("#tabText").slideUp("fast");
      $("#tabWebsite").slideUp("fast");
   }
});

HTML表单

<select name="tabType" class="form-control" id="tabTypeSelect">
   <option value="text">Text Block</option>
   <option value="url">Website Attachment</option>
</select>

文本块
网站附件

要切换的HTML内容

<div class="form-group" id="tabText">
    Blah Blah
</div>                                  
<div class="form-group" id="tabWebsite">
    Blah
</div> 

废话
废话

这很有效

$("#tabWebsite").css("display","none");
$("#tabTypeSelect").change(function(){
    if($('select[name=tabType] option:selected').val() == "text" ) {
    $("#tabText").slideDown("fast");
        $("#tabWebsite").slideUp("fast");
    } 
    else {
        $("#tabText").slideUp("fast");
        if($('select[name=tabType] option:selected').val() == "url" ) {    
            $("#tabWebsite").slideDown("fast");
        } else {
        $("#tabWebsite").slideUp("fast");
        }
    } 
});