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

Question

我需要一些帮助来生成多个选择框。我能够生成新的框，但它们不包含框应该具有的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>

最后，我将有两次点击“添加另一个动物按钮”之后的截图。谢谢您的帮助！

如您所见，生成空选择框。

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

数据库截图

Answer 1

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

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

这是jsfiddle