Dynamic Select Drop Box Generation Containing PHP Data

Question

I need some help generating multiple select boxes. I am able to generate new boxes but they do not contain the SQL data that the boxes should have. I will link my javascript code first.

    <script>

                        function add_file_field2(){
                            var container2=document.getElementById('file_container2');
                            var file_field2=document.createElement('select');
                            file_field2.name='animalCommony[]';
                            file_field2.type='animalCommony';
                            file_field2.value = 'animalCommony[]';
                            file_field2.text = 'animalCommony';
                            container2.appendChild(file_field2);
                            var br_field=document.createElement('br');
                            container2.appendChild(br_field);
                        }

                        function remove_field2() {
                            var container2=document.getElementById('file_container2');
                            lastChild = container2.lastChild;
                            if(lastChild !=0) {
                                container2.removeChild(lastChild);
                                file_field-= 1;
                            }
                        }
</script>

So I am not sure how I need to modify that code to generate the correct select boxes.

Here is my php code:

<?php
    $db = get_db_connection('swcrc');
    $db->connect();
    $db->query("SELECT [ID], [Common_Name], [Scientific_Name] FROM dbo.All_Animals");
    while($row = $db->fetch())
    {
    ?>
       <option value="<?php echo $row['Common_Name'];?> - <?php echo $row['Scientific_Name'];?>"><?php echo $row['Common_Name'];?> - <em><?php echo $row['Scientific_Name'];?></em></option>

    <?php 
    }
    ?>
                            </select>
                            </div>
                          </p>
                          <p>
                          <a href="javascript:void(0);" onClick="add_file_field2();">Add Another Animal</a>
                          <br />
                          <a href="javascript:void(0);" onClick="remove_field2();">Remove Animal</a><br />
                            <br>
                          </p>

Finally I will have a screenshot of what it looks like after hitting the 'add another animal button' twice. Thank you for your help!

As you can see empty select boxes are generated.

Screen shot including an example of the kind of data that should populate the added boxes.

Screenshot of database

Answer 1

If all you want to do is copy the contents of the selection box, you don't need to query SQL again. Here's a javascript function that will do the copy, assuming your original selection box has id "myselect." I've also left you a jsfiddle below.

window.add_file_field2 = function () {

    function  copySelect(select) {
        var newSelect = document.createElement('select');
        newSelect.name = 'animalCommony[]';
        newSelect.type = 'animalCommony';
        newSelect.value = 'animalCommony[]';
        newSelect.text = 'animalCommony';

        for (var i = 0;i < select.options.length;i++) {
            var option = document.createElement('option')
            option.value = select.options[i].value
            option.text = select.options[i].text
            newSelect.appendChild(option)
        }
        return newSelect
    }

    var container2 = document.getElementById('file_container2');
    container2.appendChild(copySelect(document.getElementById("myselect")));
    var br_field = document.createElement('br');
    container2.appendChild(br_field);
}

Here is a jsfiddle