根據下拉列表中的選擇隱藏和顯示面板

Question

我創建了一個應該顯示和隱藏一些項目的腳本，具體取決於從5個下拉列表中選擇的相同選項。這個下拉列表中的選項完全相同。所以我只是檢查，看看我的解決方案也可能會被簡化

HTML：

<label for="ddlGift1">Gift #1</label> 
     <asp:DropDownList runat="server" ID="ddlGift1" AutoPostBack="true" AppendDataBoundItems="True" ClientIDMode="Static" > 
      <asp:ListItem Value="--" Text="--" /> 
     </asp:DropDownList> 
<label for="ddlGift2">Gift #2</label> 
     <asp:DropDownList runat="server" ID="ddlGift2" AutoPostBack="true" AppendDataBoundItems="True" ClientIDMode="Static" > 
      <asp:ListItem Value="--" Text="--" /> 
     </asp:DropDownList> 
<label for="ddlGift3">Gift #3</label> 
     <asp:DropDownList runat="server" ID="ddlGift3" AutoPostBack="true" AppendDataBoundItems="True" ClientIDMode="Static" > 
      <asp:ListItem Value="--" Text="--" /> 
     </asp:DropDownList> 
<label for="ddlGift4">Gift #4</label> 
     <asp:DropDownList runat="server" ID="ddlGift4" AutoPostBack="true" AppendDataBoundItems="True" ClientIDMode="Static" > 
      <asp:ListItem Value="--" Text="--" /> 
     </asp:DropDownList>  
<label for="ddlGift5">Gift #5</label> 
     <asp:DropDownList runat="server" ID="ddlGift5" AutoPostBack="true" AppendDataBoundItems="True" ClientIDMode="Static" > 
      <asp:ListItem Value="--" Text="--" /> 
     </asp:DropDownList> 

JS：

var gift1 = $('#ddlGift1'); 
    var gift1 = $('#ddlGift1'); 
    var gift2 = $('#ddlGift2'); 
    var gift3 = $('#ddlGift3'); 
    var gift4 = $('#ddlGift4'); 
    var gift5 = $('#ddlGift5'); 

    showHide(); 
    gift1.change(function() { 
    showHide(); 
}); 
gift2.change(function() { 
    showHide(); 
}); 
gift3.change(function() { 
    showHide(); 
}); 
gift4.change(function() { 
    showHide(); 
}); 
gift5.change(function() { 
    showHide(); 
}); 
function showHide() { 
var gift1 = $('#ddlGift1'); 
var gift2 = $('#ddlGift2'); 
var gift3 = $('#ddlGift3'); 
var gift4 = $('#ddlGift4'); 
var gift5 = $('#ddlGift5'); 
var vsity = $('#shvarsity'); 



if ((gift1.children("option:selected").text())||(gift2.children("option:selected").text())||(gift3.children("option:selected").text())||(gift4.children("option:selected").text())||(gift5.children("option:selected").text()) == "Varsity Club") 
{ 

    vsity.show(); 

} else { 

    vsity.hide(); 
} 

} 

Answer 1

添加類所有的「禮物」的元素，像

<asp:DropDownList runat="server" id="ddlGift1" class="gift" AutoPostBack="true" AppendDataBoundItems="True" ClientIDMode="Static" > 
    <asp:ListItem Value="--" Text="--" /> 
</asp:DropDownList> 

然後JS看起來像

var gifts = $('.gift'); 
showHide(); 

gifts.change(function() { 
    showHide(); 
}); 

function showHide() { 
for (i in gifts) { 
    if (gifts[i].children("option:selected").text() == "Varsity Club") 
    { 
     vsity.show(); 
    } else { 
     vsity.hide(); 
    } 
} 
}