Add new Dropdownlist on link click

Question

I have Dropdownlist like this enter image description here

But there must be shown single dropdownlist and to add other Dropdownlist click on other Time. How this should be done??? Like This

This is ASP.NET code

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

I make the Now I add button. How could I shown that by making Display yes one by one on button click enter image description here

Any one of these demonstrate techniques that can be used to do this: http://stackoverflow.com/questions/7340644/dynamically-add-input-type-select-with-options-in-javascript http://stackoverflow.com/questions/3826235/how-can-i-dynamically-add-a-select-element-to-a-form-using-prototype-rails http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/ http://www.trans4mind.com/personal_development/JavaScript2/createSelectDynamically.htm — Sean Airey, Aug 28 '13 at 14:34

Leandro Nagem Zolini · Answer 1 · 2013-08-28T15:12:47.057

Using a server side aproach with c# you should do something like that:

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

CodeBehind

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

To add a new dropdown:

    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);
    }

To load the dropdowns properly:

    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();
    }

To get the values from the dropdowns and put it on a string :

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

To clear the dropdowns:

 this.NumberOfControls.Clear();

By Jquery funtion var count = 1; function addRow(btn) { if (count < 4) { // alert(count); $("#tr" + count).show(); count += 1; } } I Display the tage which I mark as Display:None; — Mohsinjan110, Aug 28 '13 at 16:06

score 0 · Answer 2 · answered Aug 29 '13 at 00:22

You need something like this :

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

But first change this :

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

to this:

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

And add reference to jquery at the head of the page:

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

Add new Dropdownlist on link click

2 Answers2