Remove From My Forums

unable to clone the drop-down to newly created dropdown element

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

0

Sign in to vote

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