如何使下拉选择动态asp2.0

Question

我正在学习jquery，我有一个下拉列表：

Option 1 
Option 2
Option 3

选择选项1-显示textboxOption1和按钮

选择选项2-显示textboxOption2和按钮

选择选项3-显示textboxOption3和按钮等等......

我想知道如何选择动态并显示与选项关联的文本框和按钮。因为如果我有例如。 10个选项当前代码太长而且变得混乱且无法维护。

我正在使用文本框控件。

代码：

$(document).ready(function () {

    hide();
    $("select[id$='DropDownListFilter']").change(function () {
        var optionValue = $("select[id$='DropDownListFilter'] option:selected").val();
        if (optionValue == 'Option1') {
            $('#Option1').hide(0).delay().fadeIn(1000);
            $("#Option2").hide('slow');
            $('#Option3').hide();
        } else if (optionValue == 'Option2') {
            $("#Option2").hide(0).delay().fadeIn(1000);
            $('#Option1').hide('slow');
            $('#Option3').hide();
        } else if (optionValue == 'Option3') {
            $('#Option3').hide().delay().fadeIn(1000);
            $("#Option1").hide();
            $('#Option2').hide('slow');
        }
        else {
            $("#Option1").hide('slow');
            $('#Option2').hide('slow');
            $('#Option3').hide('slow');
        }
    });
});

    function hide() {
        $('#Option1').hide();
        $("#Option2").hide();
        $('#Option3').hide();
    }

HTML：更新 - 在Patel建议的每个div中添加了id =选项。

   <div class="col-lg-4 col-bg">
                    <div id="filterbystatus" class="form-group">
                        <asp:Label ID="FilterStatus" CssClass="label label-default" runat="server">Filter By</asp:Label>
                        <asp:DropDownList ID="DropDownListFilter" runat="server" CssClass="form-control">
                            <asp:ListItem>Select</asp:ListItem>
                            <asp:ListItem>Tag</asp:ListItem>
                            <asp:ListItem>Description</asp:ListItem>
                            <asp:ListItem>Status</asp:ListItem>
                        </asp:DropDownList>
                    </div>
                <div id="option1" class="form-group">
                    <asp:TextBox ID="txtFilterByTag" CssClass="form-control" runat="server" placeholder="Enter Tag..." />
                    <asp:Button ID="btnTagFitler" CssClass="btn btn-primary col-md-6" runat="server" Text="Search"/>
                </div>
                <br />
                <br />
                <div id="option2" class="form-group">
                    <asp:TextBox ID="txtFilterByDescription" CssClass="form-control" runat="server" placeholder="Enter Description..."></asp:TextBox>
                    <asp:Button ID="btnDescFilter" CssClass="btn btn-primary" runat="server" Text="Search" />
                </div>

                </div>