douhuang1973
2014-01-31 22:36
浏览 51

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

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! enter image description here

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. enter image description here

Screenshot of database enter image description here

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dqcj32855 2014-01-31 23:27
    已采纳

    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

    点赞 打赏 评论

相关推荐 更多相似问题