Hi all,
On my aspx page I have the drop-down list.
How to add new drop-down list from existing drop-down list in c# ASP.NET?
<asp:DropDownList ID="ddl" runat="server"
Enabled="false"
BackColor="Yellow"
CssClass="pure-u-23-24">
<asp:ListItem Text="[ == Please Select == ]" Value="" />
<asp:ListItem Text="1" Value="1" />
<asp:ListItem Text="2" Value="2" />
</asp:DropDownList>
<div class="pure-u-1 pure-u-md-1-3">
<span id="ctl00_ContentPlaceHolder1_lbddl1">dd1</span>
<select name="ctl00$ContentPlaceHolder1$ddl1"
id="ctl00_ContentPlaceHolder1_ddl1" class="pure-u-23-24"
style="background-color:Yellow;">
<option selected="selected" value="">[ == Select please == ]</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div>
<div class="pure-u-1 pure-u-md-1-3">
<span id="ctl00_ContentPlaceHolder1_ddl2">ddl2</span>
<select name="ctl00$ContentPlaceHolder1$ddl2"
id="ctl00_ContentPlaceHolder1_ddl2" class="pure-u-23-24"
style="background-color:Yellow;">
<option selected="selected" value="">[ == Select please == ]</option>
<option value="">2022-006</option>
<option value="">2022-007</option>
<option value="">2022-008</option>
<option value="">2022-009</option>
</select>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnClone]").bind("click", function () {
var index = $("#container select").length + 1;
//Clone the DropDownList
var ddl = $("[id$=dd1]").clone();
var ddl2 = $("[id$=dd2]").clone();
//Set the ID and Name
ddl.attr("id", "dd1_" + index);
ddl.attr("name", "dd1_" + index);
ddl2.attr("id", "dd2_" + index);
ddl2.attr("name", "dd2_" + index);
//[OPTIONAL] Copy the selected value
var selectedValue = $("[id$=dd1] option:selected").val();
ddl.find("option[value = '" + selectedValue + "']").attr("selected", "selected");
var selectedValue2 = $("[id$=dd2] option:selected").val();
ddl2.find("option[value = '" + selectedValue2 + "']").attr("selected", "selected");
//Append to the DIV.
$("#container").append(ddl);
$("#container").append("<br /><br />");
return false;
});
});
</script>
