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

我正在学习jquery，我有一个dropdownlist：

Option 1 
Option 2
Option 3

选择选项1-显示文本框选项1和按钮

选择选项2-显示文本框选项2和按钮

在选择选项3-显示文本框选项3和按钮等

我想知道如何使这个选择动态和显示文本框和按钮相关的选项。因为如果我有10个选项，当前的代码将太长，变得混乱，无法维护

我正在使用文本框控件

代码：

HTML:Update-id=选项添加到Patel建议的每个div中

   <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>

---

我可以建议你：

$("select[id$='DropDownListFilter']").change(function () { // bind the change event
    var optionValue = $(this).find("option:selected").val(); // get the value of selected option
    $('div[id^="option"]').hide(); // initially hide all the text box's parent div
    $('input[type="text"][id*="'+optionValue+'"]').closest('div').show(); // finally show the respective textbox div
});

$select[id$='DropDownListFilter'].changefunction{//bind更改事件 var optionValue=$this.findoption:selected.val；//获取所选选项的值 $'input[type=text][id^=txt]'。隐藏；//最初隐藏所有文本框 $+optionValue.show；//最后显示相应的文本框 }; 输入[type=text][id^=txt]{ 显示：无； } 选择 txt1 txt2 txt3 选择 txt4 txt5 txt6 选择 txt7 txt8 txt9

---

我忘了提到我使用的是asp2.0和textbox控件，因此每个文本框的id都不同，更新了问题。@Harry你能从页面发布生成的html吗？只是想知道它看起来怎么样？控件的ID。你能解释一下这一行在做什么吗？$'输入[type=text][id*='+optionValue+']'。最近的'div'。显示；我问这个问题的原因是，如果div没有文本框怎么办，如果它有不同的控件怎么办。那它就不会出现了。。。使用当前代码时，它仅适用于具有输入类型text的div。如果他们这样做，则显示/隐藏将起作用。这是您期望的行为吗？->@帕特尔：是的，这是，但我不能选择div？你说选择div是什么意思？请解释。$'div[id^=Option]'。隐藏//使用选项隐藏所有Div它会隐藏该Div，然后出现另一个Div。当您更改“选择”时，请检查“按钮更改”中的文本，因为它们在不同的分区中都是不同的按钮！

$("select[id$='DropDownListFilter']").change(function () { // bind the change event
    var optionValue = $(this).find("option:selected").val(); // get the value of selected option
    $('div[id^="option"]').hide(); // initially hide all the text box's parent div
    $('input[type="text"][id*="'+optionValue+'"]').closest('div').show(); // finally show the respective textbox div
});