在链接点击上添加新的下拉列表

Question

我有这样的下拉列表

但必须显示单个下拉列表并添加其他Dropdownlist点击其他时间。 应该如何做？喜欢这个

这是ASP.NET代码

       <table width="100%" border="0">
    <tr>
         <td>                                                    
      <asp:DropDownList class="chzn-select validate[required]" ID="ddlconvenient1" runat="server">
        </asp:DropDownList>
 </td>
     <td>
   <div class="wrapper">                                                      
       <div class="checkboxes">
    <asp:CheckBoxList ID="ChkDay1" CssClass="chzn-choices " runat="server" RepeatDirection="Horizontal">
           </asp:CheckBoxList>                                                          
         </div>
     </div>
        </td>
       <td><button id="btnAdd" type="button" onclick="addRow(this)">Add</button></td>
     </tr>
          <tr id="tr1" style=" display:none;">
   <td>
    <asp:DropDownList ID="ddlconvenient2" CssClass="chzn-select" runat="server">
   </asp:DropDownList>
   </td>
              <td>
           <div class="wrapper">                                                      
        <div class="checkboxes">
          <asp:CheckBoxList ID="ChkDay2" runat="server" RepeatDirection="Horizontal">
           </asp:CheckBoxList>
         </div></div>
      </td>
       </tr>
      <tr id="tr2" style=" display:none;">
             <td>
              <asp:DropDownList ID="ddlconvenient3" CssClass="chzn-select" runat="server">
           </asp:DropDownList>
             </td>
         <td>
                                                 <div class="wrapper">

                                                            <div class="checkboxes">
                                                    <asp:CheckBoxList ID="ChkDay3" runat="server" RepeatDirection="Horizontal">
                                                    </asp:CheckBoxList>
                                                    </div> 
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr id="tr3" style=" display:none;">
                                                <td>
                                                    <asp:DropDownList ID="ddlconvenient4" CssClass="chzn-select" runat="server">
                                                    </asp:DropDownList>
                                                </td>
                                                <td>
                                                 <div class="wrapper">

                                                            <div class="checkboxes">
                                                    <asp:CheckBoxList ID="ChkDay4" runat="server" RepeatDirection="Horizontal">
                                                    </asp:CheckBoxList>
                                                    </div></div>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

我做了 现在我添加按钮。如何通过按钮点击逐个显示“是”来显示

Answer 1

使用c＃的服务器端aproach你应该做类似的事情：

    <asp:LinkButton ID="addDDL" runat="server" OnClick="addDDL_OnClick" />

代码隐藏

 protected List<string> NumberOfControls
    {
        get { return (List<string>)ViewState["NumControls"]; }
        set { ViewState["NumControls"] = value; }
    }

添加新的下拉列表：

    protected void addDDL_OnClick(object sender, EventArgs e)
    {
        int count = this.NumberOfControls.Count();

        var dropdown = new DropDownList();
        dropdown.ID = "ddlApplyTo_" + count;
        dropdown.AutoPostBack = false;
        dropdown.ClientIDMode = ClientIDMode.Static;
        dropdown.CssClass = "class";

        dropdown.DataSource = YourDataSource;
        dropdown.DataValueField = "Key";
        dropdown.DataTextField = "Value";
        dropdown.DataBind();

        this.NumberOfControls.Add("ddlApplyTo_" + count);
    }

正确加载下拉列表：

    protected override void OnLoad(EventArgs e)
    {
        if (!Page.IsPostBack){
            // Initiate the list of dynamically added dropdowns
            this.NumberOfControls = new List<string>();
        }
        else{
            // Controls must be repeatedly created on postback
            this.createControls();
        }
        base.OnLoad(e);
    }

    private void createControls()
    {
        var count = this.NumberOfControls.Count();
        for (var i = 0; i < count; i++)
        {
            var dropdown = new DropDownList
                {
                    ID = "ddlApplyTo_" + i,
                    AutoPostBack = false,
                    ClientIDMode = ClientIDMode.Static,
                    CssClass = "class"
                };
        }

        dropdown.DataSource = YourDataSource;
        dropdown.DataValueField = "Key";
        dropdown.DataTextField = "Value";
        dropdown.DataBind();
    }

从下拉列表中获取值并将其放在字符串上：

 var values = string.Empty;
 foreach (var s in this.NumberOfControls)
 {
    var ddl = (DropDownList)FindControl(s);
    values += ddl.SelectedItem.Text + ", ";
 }

清除下拉列表：

 this.NumberOfControls.Clear();

Answer 2

你需要这样的东西：

<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('click', '#btnAdd', function () {    
            for (var i = 1; i < 4; i++) {    
                if (!$('#tr' + i).is(':visible')) {
                    $('#tr' + i).css('display', 'block');
                    return;
                }
            }             
        })
    });        

</script>

但首先改变这个：

<button id="btnAdd" type="button" onclick="addRow(this)">Add</button>

到此：

<button id="btnAdd" type="button" >Add</button>

在页面的顶部添加对jquery的引用：

 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>