Question 44015 in Html Question posted in
Some basic documentation can be found here.

Duplicating a dropdown and the previous input – Html

I would like to duplicate a <div> which contains text input and a dropdown.

I have tried the following but it doesn’t copy the input from the dropdown.

Also, how can I duplicate the <div> but produce empty fields (in both)?

    <script>
    function myFunction() {
      const node = document.getElementById("category_div");
      const clone = node.cloneNode(true);
      
      document.body.appendChild(clone);
    }
    </script>

    <div class="category_div" id="category_div"> 
        
        

        Project number:
        <select>
        <option value=""> Select </option>
        <option value="1"> 1 </option>
        <option value="2"> 2 </option>
        </select>

        field#2
        <input type="text" placeholder="this will be an example..." name="uname" required>
        
    </div>

    <p> 
    <button onclick="myFunction()" class="button btn-duplicate"> + </button>
    </p>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here was my solution to duplicate while maintaining the dropdown input. I'm sure there's a more elegant solution but here's something to build on:

    <!DOCTYPE html>
<html lang="en-US" dir="ltr">
    <head>
        <meta charset="UTF-8" /> 
        <meta name="viewport" content="width=device-width,initial-scale=1" /> 
        
        
        <title> crunchy banana </title> 
    
        <style>

            body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            }
            
            .main {
            padding: 16px;
            margin-bottom: 30px;
            }

            h1 {text-align: center;
                font-size: 27px;}
            h2 {text-align: center;
                margin-bottom: 80px;}
            p {text-align: center;}
            div {text-align: center;}

            .button {
                background-color: #04AA6D; /* Green */
                border: none;
                color: white;
                padding: 20px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 4px 2px;
                cursor: pointer;
            }        

        </style>

        <script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
    
    </head>

    <body>

        <h1> This is just an example... </h1>
       
        
        <div id="1">
            <div>
                duplicate
                <a id="clone" herf="#" class="button"> + </a>
        
                <div id="list">         
                            
                    <select>
                        <option value="">Select source</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                    
                    <select>
                        <option value="">Select fun...</option>
                        <option value="banana">banana</option>
                        <option value="crunchy">crunchy</option>
                    </select>

                    <input type="text" placeholder="this will be an example..." name="uname" required>

                </div>
            </div>
        </div>

            



        <script type="text/javascript">//<![CDATA[


            $('#clone').click(function() {
            var $orginalDiv = $('#list');
            var $clonedDiv = $orginalDiv.clone();
            
            
            //get original selects into a jq object
            var $originalSelects = $orginalDiv.find('select');
            
            
            $clonedDiv.find('select').each(function(index, item) {
            
                //set new select to value of old select
                $(item).val($originalSelects.eq(index).val());
            
            });
            
            $clonedDiv.appendTo('body');
            });   
            
            
        //]]></script>
   
    </body>   
    
</html>


  2. 0

    If you want the input to be blank.

    let clone = node.cloneNode(true);
clone.querySelector('input').value = '';

    We are using the query selector method on our clone to get the input within and then setting its value to ”.

    The select menu already is at default for the clone, so that shouldn’t be an issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search