Question

我正在尝试使用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>

Answer 1

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

这是有效的

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

1 个答案: