javascript - Add new Dropdownlist on link click -

i have dropdownlist this

but there must shown single dropdownlist , add other dropdownlist click on other time. how should done??? this

this 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 add button. how shown making display yes 1 one on button click

using server side aproach c# should that:

    <asp:linkbutton id="addddl" runat="server" onclick="addddl_onclick" /> 

codebehind

 protected list<string> numberofcontrols     {         { return (list<string>)viewstate["numcontrols"]; }         set { viewstate["numcontrols"] = value; }     } 

to add 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 dropdowns properly:

    protected override void onload(eventargs e)     {         if (!page.ispostback){             // initiate list of dynamically added dropdowns             this.numberofcontrols = new list<string>();         }         else{             // controls must repeatedly created on postback             this.createcontrols();         }         base.onload(e);     }      private void createcontrols()     {         var count = this.numberofcontrols.count();         (var = 0; < 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 values dropdowns , put on string :

 var values = string.empty;  foreach (var s in this.numberofcontrols)  {     var ddl = (dropdownlist)findcontrol(s);     values += ddl.selecteditem.text + ", ";  } 

to clear dropdowns:

 this.numberofcontrols.clear();