ASP.Net: Copy DropDownList to another using jQuery

landomarossi
 
on Sep 21, 2022 06:14 AM
216 Views

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>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 22, 2022 11:44 PM
on Sep 22, 2022 11:45 PM

Hi landomarossi,

You are using wrong selector. Refer below modified code.

HTML

<div id="container">
    <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 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">2022-006</option>
            <option value="2022-007">2022-007</option>
            <option value="2022-008">2022-008</option>
            <option value="2022-009">2022-009</option>
            <option value="2022-010">2022-010</option>
            <option value="2022-011">2022-011</option>
            <option value="2022-012">2022-012</option>
            <option value="2022-013">2022-013</option>
            <option value="2022-014">2022-014</option>
            <option value="2022-015">2022-015</option>
        </select>
    </div>
</div>
<input type="button" id="btnClone" value="Copy" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnClone]").bind("click", function () {
            $("#container").append("<br /><br />");
            var index = $("#container select").length + 1;

            //Clone the DropDownList
            var ddl = $("select[id$=ddl1]").clone();
            var ddl2 = $("select[id$=ddl2]").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 = $("select[id$=ddl1] option:selected").val();
            ddl.find("option[value = '" + selectedValue + "']").attr("selected", "selected");
            var selectedValue2 = $("select[id$=ddl2] option:selected").val();
            ddl2.find("option[value = '" + selectedValue2 + "']").attr("selected", "selected");

            //Append to the DIV.
            $("#container").append(ddl);
            $("#container").append(ddl2);

            return false;
        });
    });
</script>

Demo