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

Question

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

Option 1 
Option 2
Option 3

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

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

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

我想知道如何使这个 select 动态并显示与选项关联的文本框和按钮。因为如果我有例如。 10 options 当前代码会太长，变得凌乱，难以维护。

我正在使用文本框控件。

代码：

$(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：更新 - id=option 添加到 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>

Answer 1

我可以建议你这样做：

$("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']").change(function() { // bind the change event
      var optionValue = $(this).find("option:selected").val(); // get the value of selected option
      $('input[type="text"][id^="txt"]').hide(); // initially hide all the text boxes
      $('#' + optionValue).show(); // finally show the respective textbox
    });

input[type="text"][id^="txt"] {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dd-DropDownListFilter'>
  <option value=''>select</option>
  <option value='txt1'>txt1</option>
  <option value='txt2'>txt2</option>
  <option value='txt3'>txt3</option>
</select>
<select id='dd-DropDownListFilter'>
  <option value=''>select</option>
  <option value='txt4'>txt4</option>
  <option value='txt5'>txt5</option>
  <option value='txt6'>txt6</option>
</select>
<select id='dd-DropDownListFilter'>
  <option value=''>select</option>
  <option value='txt7'>txt7</option>
  <option value='txt8'>txt8</option>
  <option value='txt9'>txt9</option>
</select>
<input type='text' id='txt1' placeholder='txt1'>
<input type='text' id='txt2' placeholder='txt2'>
<input type='text' id='txt3' placeholder='txt3'>
<input type='text' id='txt4' placeholder='txt4'>
<input type='text' id='txt5' placeholder='txt5'>
<input type='text' id='txt6' placeholder='txt6'>
<input type='text' id='txt7' placeholder='txt7'>
<input type='text' id='txt8' placeholder='txt8'>
<input type='text' id='txt9' placeholder='txt9'>

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

How to make dropdown selection dynamic asp2.0

jquery

dynamic