Question

我通过填充HTML选择来解决问题。此选择采用首先加载到div中的形式。（见下面的代码）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type"  />
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script>
        function createForm(){
            $("#formdiv").load("Register.html");

            var itemval= '<option value="OT">OT</option>';

            document.getElementById("sel").appendChild(itemval);
        }

        function validateForm(){
            // ...
        }
    </script>   
</head>

<body onload="createForm()">

    <div id="formdiv" >
        // here will be the form
    </div>

</body>

Register.html是一个简单的表格

<h2>Register</h2>

<form name="registerForm" id="registerForm" onsubmit="validateForm()">

  Select:<select name="sel" id="sel"></select>

  <input type="submit" value="Submit">

</form>

createForm（）函数应作为第一个测试填充select标签。但不幸的是，它没有在浏览器中显示任何选项。

希望你们中的一些人比我更有经验，并且可以向我暗示解决方案。提前谢谢！

Answer 1

这里的问题是你使用带有String的appendChild，

你应该使用innerHTML来插入一个字符串，或者你想要追加

执行createElement然后追加，appendChild接受Node作为参数，

在你的情况下，最好在select

上使用add（）方法

http://www.w3schools.com/jsref/met_select_add.asp

<script type="text/javascript">
    function createForm() {

        var option = document.createElement("option");
        option.text = "OT";
        option.value = "OT";
        document.getElementById("sel").add(option);
    }

    function validateForm() {
        // ...
    }
</script>

<div id="formdiv">
    <form name="registerForm" id="registerForm" onsubmit="validateForm()">

        Select:
        <select name="sel" id="sel"></select>

        <input type="submit" value="Submit">

    </form>
</div>
<h2>Register</h2>

请参阅jsfiffle链接：http://jsfiddle.net/qgfbhgwd/

带有工作示例

Answer 2

你有2个错误：

使用jQuery加载函数因为是异步的，所以在加载文件register.html
appendChild需要DOM元素而不是字符串

此代码可以解决您的问题，希望有所帮助：

function createForm(){
            var populateSelect = function() {
                var itemsValues = ['OT', 'FOO', 'BAR'];
                var items = document.createDocumentFragment();

                itemsValues.forEach(function(el) {
                    var option = document.createElement("option");
                    option.value = el;
                    option.innerHTML = el;

                    items.appendChild(option);
                });

                document.getElementById("sel").appendChild(items);
            };

            $("#formdiv").load("register.html", populateSelect);
        }

Answer 3

您无法直接将<option value="OT">OT</option>添加为appendChild，因此请使用javascript createElement并始终更好地为jquery load()编写回调函数来操作DOM。

   function createForm() {
        $("#formdiv").load("Register.html", function () {
            //var itemval = '<option value="OT">OT</option>';
            var itemval = document.createElement("option");
            itemval.setAttribute("value", "OT");
            itemval.innerText = "OT";
            document.getElementById("sel").appendChild(itemval);
        });
    }

使用Javascript

3 个答案: