copying DropDown1 options to DropDown2 by JavaScript

Last post 09-02-2007 1:18 PM by NC01. 7 replies.

Sort Posts:

  • copying DropDown1 options to DropDown2 by JavaScript

    08-25-2007, 5:56 AM
    • Loading...
    • viktors
    • Joined on 01-11-2007, 11:48 AM
    • Posts 13

    Hello,

    I would appreciate if someone could give me a hint how to copy all the options from one DropDownList (select tag in HTML) to another one.

    I have a very limited knowledge of JavaScript and tried something like this:

    document.getElementById("DropDownList2").innerHTML = document.getElementById("DropDownList1").innerHTML;

    which doesn't work.

     

    My HTML and code:

    <form id="form1" runat="server">

    <div>

    <asp:DropDownList ID="DropDownList1" runat="server">

    <asp:ListItem Value="1">option1</asp:ListItem>

    <asp:ListItem Value="2" Selected="True">option2</asp:ListItem>

    </asp:DropDownList>

    <asp:DropDownList ID="DropDownList2" runat="server">

    </asp:DropDownList>

    <script language=javascript>

    document.getElementById("DropDownList2").innerHTML = document.getElementById("DropDownList1").innerHTML;

    alert(document.getElementById("DropDownList1").innerHTML);

    alert(document.getElementById("DropDownList2").innerHTML);

    </script>

    </div>

    </form>

     

    Actually, one of my DropDownLists sits in the document in an iFrame and the other one in the document containing the iFrame and I tried to use

    top.document.getElementById("DropDownList1").innerHTML = document.getElementById("DropDownList1").innerHTML;

    to update the document containing the iFrame when the document in the iFrame loads but that has no relevance to this the problem, just describes my situation.

     

    I hope that solution of this problem is shorter than my description of it and look forward for a hint,

    Viktors

    Filed under: ,
  • Re: copying DropDown1 options to DropDown2 by JavaScript

    08-25-2007, 11:45 AM
    Answer
    • Loading...
    • leandrokoiti
    • Joined on 01-31-2006, 10:48 PM
    • Brasil
    • Posts 27

    I never tried to do what u r trying to... But I think u can try something like this:

    //@source: the control we are going to use as source of our clone
    //@destination: the control that we are going to use as destination to set the properties
    function clone(source, destination) {
                for ( var p in source ) {
                    try {
                        if ( p.toLocaleString().toLocaleLowerCase() != "innerhtml" && p.toLocaleString().toLocaleLowerCase() != "innertext" && p.toLocaleString().toLocaleLowerCase() != "id" && p.toLocaleString().toLocaleLowerCase() != "outertext") {
                            var sourceVal = source.getAttribute(p);
                            destination.setAttribute(p, sourceVal);
                            if ( typeof(source.getAttribute(p).length) != "undefined" ) {
                                clone(source.getAttribute(p), destination.getAttribute(p));
                            }
                        }
                    } catch ( e ) {
                        window.status = e.message;
                    }
                }
            }

     

    the function doesn't set the id because we want to keep our original id, innertext, outertext and the innerhtml  because it will override the control's rendering format

    or we can append the control dynamycally like this:

     //@source: the control to clone (not the id)
    //@target: the control where our clone will be appended
    function clone(source, target) {
                var destination = document.createElement(source.tagName);
                destination.id = new Date().getUTCMilliseconds(); //a new id to the cloned control
                target.appendChild(destination); //the control where our clone will be appended
                for ( var p in source ) {
                    try {
                        if ( p.toLocaleString().toLocaleLowerCase() != "innerhtml" && p.toLocaleString().toLocaleLowerCase() != "innertext" && p.toLocaleString().toLocaleLowerCase() != "id" && p.toLocaleString().toLocaleLowerCase() != "outertext") {
                            var sourceVal = source.getAttribute(p);
                            destination.setAttribute(p, sourceVal);
                            if ( typeof(source.getAttribute(p).length) != "undefined" ) {
                                clone(source.getAttribute(p), destination.getAttribute(p));
                            }
                        }
                    } catch ( e ) {
                        window.status = e.message;
                    }
                }
            }

     

    hope this helps 

    Age is a very high price to pay for maturity. ~Tom Stoppard
  • Re: copying DropDown1 options to DropDown2 by JavaScript

    08-29-2007, 3:07 AM
    Answer

    Hi Viktors,

    From your description, I understand that you have two web pages. I assume one is test.aspx, another is iframe1.aspx. In test.aspx, there is a dropdownlist control and an iframe object which source is iframe1.aspx. In iframe1.aspx, there is a dropdownlist control. You want to copy all the options of the dropdownlist contol in test.aspx to the dropdownlist control in the iframe1.axpx. If I have misunderstood your concern, please let me know.

    For this scenario, I have provided the following code for your reference. It works well on my machine. I hope it is helpful to you.

    ************* test.aspx
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript">
            function CopyAll()
            {
                frames('top').document.getElementById('DropDownList1').outerHTML = document.getElementById('DropDownList1').outerHTML;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="ddl1">
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem>aaa</asp:ListItem>
                <asp:ListItem>bbb</asp:ListItem>
                <asp:ListItem>ccc</asp:ListItem>
                <asp:ListItem>ddd</asp:ListItem>
            </asp:DropDownList>
        </div>
            <iframe id="top" name="top" src="iframe1.aspx"></iframe>
            <input id="Button1" type="button" value="Copy All" onclick="CopyAll()" />
        </form>
    </body>
    </html>

    ************* iframe1.aspx
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server">
            </asp:DropDownList>
        </div>
        </form>
    </body>
    </html>

     

    Sincerely,
    Benson Yu
    Microsoft Online Community Support

    Please remember to mark the replies as answers if they help and unmark them if they provide no help. This can be beneficial to other community members reading the thread.
  • Re: copying DropDown1 options to DropDown2 by JavaScript

    08-29-2007, 4:44 AM
    Answer

    Try this...........

    var i;

    document.getElementById("DropDownList2").innerHTML="";

    for(i=0;i<document.getElementById("DropDownList1").options.length;i++)

    {

    var o = new Option();

    o.text = document.getElementById("DropDownList1").options[i].text;

    o.value = document.getElementById("DropDownList1").options[i].value;

    document.getElementById("DropDownList2").options.add(o);

    }

    Please do not forget to "Mark As Answer" if this post help you...

     

  • Re: copying DropDown1 options to DropDown2 by JavaScript

    08-29-2007, 10:43 AM
    • Loading...
    • viktors
    • Joined on 01-11-2007, 11:48 AM
    • Posts 13

    Thanks for your hints!

    For now I went for the loop solution.

    Benson Yu, I copy options from the dropdownlist in the document in an iframe to the dropdownlist in the main document. I am transporting some updates for the main document in the document that is in an iframe and then updating the main document with JavaScript. I tried

    top.document.getElementById("DropDownList1").outerHTML = document.getElementById("DropDownList1").outerHTML;

    but it did not work.

    Viktors

  • Re: copying DropDown1 options to DropDown2 by JavaScript

    08-30-2007, 4:11 AM
    Answer

    viktors:

    I tried

    top.document.getElementById("DropDownList1").outerHTML = document.getElementById("DropDownList1").outerHTML;

    but it did not work.

     

    Hi Viktors,

    Please copy entire of my code to test. The “top” should be replaced as “frames('top')”:

            function CopyAll()
            {
                frames('top').document.getElementById('DropDownList1').outerHTML = document.getElementById('DropDownList1').outerHTML;
            }

     

    Sincerely,
    Benson Yu
    Microsoft Online Community Support

    Please remember to mark the replies as answers if they help and unmark them if they provide no help. This can be beneficial to other community members reading the thread.
  • Re: copying DropDown1 options to DropDown2 by JavaScript

    09-01-2007, 9:58 AM
    • Loading...
    • viktors
    • Joined on 01-11-2007, 11:48 AM
    • Posts 13

    Thanks, Benson Yu!

     I tried frames('top').document.getElementById('DropDownList1').outerHTML = document.getElementById('DropDownList1').outerHTML; but it still did not work. (I assume 'top' was the name for the iframe.)

    It could be because the script which I am using to update the document containing the iframe is placed in the document in the iframe and is run when when the document in the iframe loads. Actually, when I first tried top.document.getElementById('DropDownList1').innerHTML = document.getElementById('DropDownList1').innerHTML; it did something to the DropDownList1 in the document containing the iframe (the options disappeared...) so top.document.getElementById('DropDownList1') found this dropdownlist.

    Now I have this loop:

    var DD1 = document.getElementById("DropDownList1");var DD2 = top.document.getElementById("DropDownList1");

    DD2.length = 0;

    for(i=0;i<DD1.length;i+=1)

    {

    DD2.options[i] = new Option(DD1.options[i].text, DD1.options[i].value);

    if(DD1.options[i].selected==true){DD2.options[i].selected=true;

    }

    }

    Viktors

  • Re: copying DropDown1 options to DropDown2 by JavaScript

    09-02-2007, 1:18 PM
    • Loading...
    • NC01
    • Joined on 08-26-2005, 3:33 PM
    • Posts 9,523
    • TrustedFriends-MVPs

    Just remember that if a PostBack occurs on the page containing the DDL to be added to, any options added to the DDL client-side will be gone after the PostBack.

    NC...

Page 1 of 1 (8 items)
Microsoft Communities
Page view counter