1

我有这样的下拉列表在此处输入图像描述

但必须显示单个下拉列表并添加其他下拉列表单击其他时间。这应该怎么做？？？像这样

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

我制作了现在我添加按钮。我怎么能通过在按钮单击上一一显示显示是 在此处输入图像描述

4

2 回答 2

0

你需要这样的东西：

<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>
于 2013-08-29T00:22:05.860 回答
0

使用带有 c# 的服务器端方法，您应该执行以下操作：

    <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();
于 2013-08-28T14:49:37.787 回答