Javascript 包含PHP数据的动态选择下拉框生成

我需要一些帮助来生成多个选择框。我可以生成新的框，但它们不包含框应该具有的SQL数据。我将首先链接我的javascript代码

    <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>

所以我不确定我需要如何修改代码来生成正确的选择框

以下是我的php代码：

<?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>

最后，我将有一个屏幕截图，显示两次点击“添加另一个动物按钮”后的样子。谢谢你的帮助！

如您所见，将生成空的选择框

屏幕截图，包括应填充添加框的数据类型示例。

数据库截图

---

如果您只想复制选择框的内容，则无需再次查询SQL。假设您的原始选择框具有id myselect，这里有一个javascript函数将执行复制。我还在下面给你留了一个JSFIDLE

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);
}

---

下面是一个

什么样的SQL数据应该在选择框中？SQL数据只是用主键从SQL数据库的列中提取的动物名称。@Lynhedley-我将发布另一个屏幕截图，其中包含在第一个下拉列表中选择的示例。如果您需要有关SQL语句的帮助，您需要描述要查询的表。如果您需要有关javascript的帮助，请提供一个有效的sql查询。好的，我将发布一个表的屏幕截图。感谢所有帮助！