根據下拉菜單選擇隱藏並顯示div

我有一個包含7個選項的下拉列表。用戶選擇的每個選項必須在其正下方的文本區域中填寫說明。我想要實現的是當選擇一個選項時顯示適當的div並隱藏其他。這是我到目前爲止根據下拉菜單選擇隱藏並顯示div

$(document).ready(function() { 
     $("#define-labelling").hide(); 
     ... hide the remaining divs here 

$("#ProjectStatus").change(function() { 
      var selectedValue = ""; 
      $("#ProjectStatus option:selected").each(function() { 
       selectedValue += $(this).val(); 
       if (selectedValue === "Define (Labelling)") { 
        $("#define-labelling").fadeIn("slow"); 
       } 
       ... More if statements here for the other divs 
      }); 
     }); 
    }); 
});

我的問題是，是否有更乾淨的方式去做這件事？因爲目前我有多個if語句並隱藏並顯示相應的div變得有點難看。

更新以下@Mairaj答案

function showDiv() { 
    var divID = $("#ProjectStatus option:selected").attr("data-div"); 
    alert(divID); //this comes as undefined 
    $("#" + divID).show(); 
    $("#" + divID).siblings().hide(); 
}

我已經添加了兩個div爲：

<div class="form-group" id="Define (Labelling)" style="display: none;"> 
@Html.LabelFor(model => Model.LabellingInfo, htmlAttributes: new { @class = "control-label col-md-2" }) 
<div class="col-md-10"> 
    @Html.TextAreaFor(model => Model.LabellingInfo, htmlAttributes: new { @class = "form-control description" }) 
</div> 
</div> 
<div class="form-group" id="Analysis (Root Cause)" style="display:none;"> 
@Html.LabelFor(model => Model.RootCauseInfo, htmlAttributes: new { @class = "control-label col-md-2" }) 
<div class="col-md-10"> 
    @Html.TextAreaFor(model => Model.RootCauseInfo, htmlAttributes: new { @class = "form-control description" }) 
</div>

來源

2016-06-01 Code

也許你可以添加一個類'none'和'.none {顯示：無;}'，如果發生變更，然後'$（＃ProjectStatus）.addClass（ '無'）'和'$（」＃define-labeling「）.. removeClass（'none'）' – gdreamlend

@gdreamlend請問您能詳細說明一下嗎？ – Code

您在選擇選項中顯示的內容是否已修復。 –

您可以添加自定義屬性（data-div）到dropdown的每個option這將是divID將被顯示。

<div id="divMain" > 
    <div id="Div1">Div1</div> 
    <div id="Div2" style="display:none">Div2</div> 
    <div id="Div3" style="display:none">Div3</div> 
</div> 


<select id="ddlOption" onchange="showdiv()"> 
    <option value="Div1" data-div="Div1">Div1</option> 
    <option value="Div2" data-div="Div2">Div2</option> 
</select>

這裏是jQuery代碼將根據所選option

function showdiv() 
{ 
    var divID = $("#ddlOption option:selected").attr("data-div"); 
    divID = divID.replace(" ",""); 
    $("div[id$='" + divID+"']").show(); 
    $("div[id$='" + divID + "']").siblings().hide(); 
}

來源

2016-06-01 09:45:58 Mairaj

感謝您的答案，我將如何有'data-div'選項？因爲我的'

根據下拉菜單選擇隱藏並顯示div

回答