locked
unable to clone the drop-down to newly created dropdown element RRS feed

  • Question

  • User-571605279 posted

    Dear All,

    I had written the below code where I required to clone the "Month" drop down to created element "drbfunction" .
    Below is the code written to clone ,But I found no luck .Can any one help me in knowing what's the issue.

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <body>
    <select id="drbhrnames" class="select" onChange="getFiltermonths()";>
          <option selected="selected">Select</option>
          <option >Mary</option>
          <option >Chandra</option>
          <option >Joseph</option>
          <option >Chris</option>
          <option >Andrew</option>
    </select>
    </body>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    
    <script type="text/javascript">
        
    var txtHTML = "";
    $('#tblCustomListData tbody').html('');
    
    function myFunction() {
    
    var textInputBox = '<input type="text"  id="'+"txtparticipants"+'"' + ' value="'+" " +'">';
    var itm = document.getElementById("drbhrnames"); var drbtabletop= '<select id="drbfunction" > <option selected="selected">Select</option>'; for (var i = 1; i < itm.length; i++) { var cln = itm[i].cloneNode(true); document.getElementById("drbfunction").appendChild(cln); } var tr = $('<tr>'); var td = $('<td>'); td.append(textInputBox); tr.append(td); var td = $('<td>'); td.append(drbtabletop); tr.append(td); $("#tblCustomListData > tbody").append(tr); } </script> </head> <body > <button onclick="myFunction()">Try it</button> <table id="tblCustomListData" border="1" width="100%" style="overflow-x:auto;"> <thead> <tr class="bgcolorgray"> <th>Sno</th> <th >HR Names</th> </tr> </thead> <tbody> </tbody> </table> </body> </html>

    Monday, March 12, 2018 10:27 AM

Answers

  • User283571144 posted

    Hi Beginer,

    According to your description, I found you just  define the ddl code not append it into page.

    So the document.getElementById couldn't find the created dll.

    Besides, I suggest you could directly clone the base drop down list and use jquery change the cloned drop down list's id.

    More details, you could refer to below codes:

    Notice: I suggest you use only one body in the page.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8 />
    
     
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    
        <script type="text/javascript">
    
            var txtHTML = "";
            $('#tblCustomListData tbody').html('');
    
            function myFunction() {
    
                var textInputBox = '<input type="text"  id="' + "txtparticipants" + '"' + ' value="' + " " + '">';
                var drbtabletop = $("#drbhrnames").clone();         
                drbtabletop.attr("id", "drbfunction");
                var tr = $('<tr>');
                var td = $('<td>');
                td.append(textInputBox);
                tr.append(td);
    
    
                var td = $('<td>');
                td.append(drbtabletop);
                tr.append(td);
    
                $("#tblCustomListData > tbody").append(tr);
    
            }
        </script>
    </head>
    <body>
        <select id="drbhrnames" class="select" onChange="getFiltermonths()" ;>
            <option selected="selected">Select</option>
            <option>Mary</option>
            <option>Chandra</option>
            <option>Joseph</option>
            <option>Chris</option>
            <option>Andrew</option>
        </select>
        <button onclick="myFunction()">Try it</button>
        <table id="tblCustomListData" border="1" width="100%" style="overflow-x:auto;">
            <thead>
                <tr class="bgcolorgray">
                    <th>Sno</th>
                    <th>HR Names</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 13, 2018 7:05 AM

All replies

  • User753101303 posted

    Hi,

    You are using document.getElementById("drbfunction") when  the corresponding element is still just text in a JavaScript variable.

    For now the simplest path seems to add <select id="drbfunction"> to your HTML markup and the rest of the code should work. Once you get a first attempt working then change it progressively to whatever you want.

    Also have a look at https://www.w3schools.com/js/js_debugging.asp and https://developers.google.com/web/tools/chrome-devtools/console/ to see JavaScript errors and to trace your code so that you can better see what happens.

    Monday, March 12, 2018 5:59 PM
  • User283571144 posted

    Hi Beginer,

    According to your description, I found you just  define the ddl code not append it into page.

    So the document.getElementById couldn't find the created dll.

    Besides, I suggest you could directly clone the base drop down list and use jquery change the cloned drop down list's id.

    More details, you could refer to below codes:

    Notice: I suggest you use only one body in the page.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8 />
    
     
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    
        <script type="text/javascript">
    
            var txtHTML = "";
            $('#tblCustomListData tbody').html('');
    
            function myFunction() {
    
                var textInputBox = '<input type="text"  id="' + "txtparticipants" + '"' + ' value="' + " " + '">';
                var drbtabletop = $("#drbhrnames").clone();         
                drbtabletop.attr("id", "drbfunction");
                var tr = $('<tr>');
                var td = $('<td>');
                td.append(textInputBox);
                tr.append(td);
    
    
                var td = $('<td>');
                td.append(drbtabletop);
                tr.append(td);
    
                $("#tblCustomListData > tbody").append(tr);
    
            }
        </script>
    </head>
    <body>
        <select id="drbhrnames" class="select" onChange="getFiltermonths()" ;>
            <option selected="selected">Select</option>
            <option>Mary</option>
            <option>Chandra</option>
            <option>Joseph</option>
            <option>Chris</option>
            <option>Andrew</option>
        </select>
        <button onclick="myFunction()">Try it</button>
        <table id="tblCustomListData" border="1" width="100%" style="overflow-x:auto;">
            <thead>
                <tr class="bgcolorgray">
                    <th>Sno</th>
                    <th>HR Names</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </body>
    </html>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 13, 2018 7:05 AM
  • User-571605279 posted

    Sir,

    Thank you very much for your kind support , 

    I would like to extend your support for my below tags .
    Because in my production the values are binded in below format, And I don't find any function to append the cloned drop-down.
    My client is following some standards and  wants everything in below format,And when I append clone with below code I am getting information as "[object Object]".

    Request you to please support me 

    txtHTML = txtHTML + "<tr>";
    
                     txtHTML = txtHTML + "<td>";
                     txtHTML = txtHTML + drbtabletop+ "</a>";
                     txtHTML = txtHTML + "</td>";
     
                   $("#tblCustomListData").append(txtHTML);


    </div> </div>

    Tuesday, March 13, 2018 11:16 AM