根据下拉列表中的选择隐藏和显示面板

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