www.webdeveloper.com
Results 1 to 5 of 5

Thread: Copy all options from one dropdown to another

  1. #1
    Join Date
    Jul 2013
    Posts
    10

    Copy all options from one dropdown to another

    Hi,

    I have a function that is adding blank dropdowns (selects) to a table.
    The first row of my table shows a dropdown ("d1") with a list of options to select.

    Can someone tell me how I can manage that by click on a button the list of options from d1 gets copied to a specific other dropdown (e.g. "d2") so that in the end both dropdowns show exactly the same values ?

    Example:
    Code:
    <select id="d1">
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
    </select>
    
    <select id="d2">
    </select>
    Many thanks in advance for your help,
    Mike

  2. #2
    Join Date
    Jul 2013
    Posts
    10
    Edit:
    After playing around unsuccessfully with some options I think using an array to fill the dropdown could work for my case so that the options are saved in an array and then the new dropdown is filled with the content of the array.

    Unfortunately I don't know how to implement this with Javascript.

    Thanks again, Mike

  3. #3
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,105
    Here's a pretty simple solution with JavaScript:
    http://jsfiddle.net/xSC3q/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  4. #4
    Join Date
    Jul 2013
    Posts
    10
    Hi cbVision,

    thanks for your reply.

    I tried this before as well but it's having a weird effect in my case: it displays the options below the actual dropdown instead of within.

    Could the reason be that my original dropdown is filled with PHP ?

    Here is my JS code that creates the dropdown (as part of a new row), incl. the above code snippet at the end:
    Code:
        function cloneRow()
        {
            var i = parseInt(document.getElementById('did').value, 10);
            var count = 1;
            var rowCount = parseInt(document.getElementById('rowID').value, 10);
    
            var tbody = document.getElementById("outputTable3").getElementsByTagName("tbody")[0];
            var row = document.createElement("tr");
    
            var td1 = document.createElement("td")
            var strHtml1 = "<input type='text' style='width:97%' name='url[]' onBlur='lowercaseAll(this)' />";
            td1.innerHTML = strHtml1.replace(/!count!/g,count);
            td1.setAttribute("id", "url"+i);
    
            var td2 = document.createElement("td")
            var strHtml2 = "<input type='text' style='width:97%' name='email[]' onBlur='lowercaseAll(this)' />";
            td2.innerHTML = strHtml2.replace(/!count!/g,count);
            td2.setAttribute("id", "email"+i);
    
            var td3 = document.createElement("td")
            var strHtml3 = "<select style='width:104%' name='policy[]'></select>";
            td3.innerHTML = strHtml3.replace(/!count!/g,count);
            td3.setAttribute("id", "policy"+i);
    
            var td4 = document.createElement("td")
            var strHtml4 = "<select style='width:104%' name='source[]'></select>";
            td4.innerHTML = strHtml4.replace(/!count!/g,count);
            td4.setAttribute("id", "source"+i);
            
            var td5 = document.createElement("td");
            var strHtml5 = "<input type='text' style='width:97%' name='notes[]' />";
            td5.innerHTML = strHtml5.replace(/!count!/g,count);
            td5.setAttribute("colSpan", "2");
            td5.setAttribute("id", "notes"+i);
    
            var td7 = document.createElement("td")
            var strHtml7 = "<button type='button' value='' name='del[]' title='delete row' class='btn' onClick=\"if(parseInt(document.getElementById('rowID').value, 10)==1){alertRow()}else{$(this).closest('tr').remove(); delRow()}\"><i class='icon-red icon-remove'></i></button>";
            td7.innerHTML = strHtml7.replace(/!count!/g,count);
            td7.setAttribute("class", "txtcntr");
            td7.setAttribute("id", "del"+i);
    
            row.appendChild(td1);
            row.appendChild(td2);
            row.appendChild(td3);
            row.appendChild(td4);
            row.appendChild(td5);
            row.appendChild(td7);
    
            count = parseInt(count) + 1;
            tbody.appendChild(row);
            
            var pOld = document.getElementById("policy1").innerHTML;
            document.getElementById("policy2").innerHTML = pOld;
    
            rowCount = isNaN(rowCount) ? 0 : rowCount;
            rowCount++;
            document.getElementById('rowID').value = rowCount;
            i++;
            document.getElementById('did').value = i;
        }
    Any suggestions ?

    Thanks, Mike

  5. #5
    Join Date
    Jul 2013
    Posts
    10
    I got this figured out myself - thanks, Mike.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles