javascript - 使用 javascript 在标签中写入值

Question

我有这个代码

var form = document.getElementById("form");
var thirdElement = document.createElement("select");
        var thirdElementOp1 = document.createElement("option");
        thirdElementOp1.value = "--IDEAS--";
        var thirdElementOp2 = document.createElement("option");
        thirdElementOp2.value = "Random";
        var thirdElementOp3 = document.createElement("option");
        thirdElementOp3.value = "--FUN--";
        var thirdElementOp4 = document.createElement("option");
        thirdElementOp4.value = "Reflective";
        thirdElement.appendChild(thirdElementOp1);
        thirdElement.appendChild(thirdElementOp2);
        thirdElement.appendChild(thirdElementOp3);
        thirdElement.appendChild(thirdElementOp4);
        form.appendChild(thirdElement);

这会将所有这些子项附加到表单中，生成以下 HTML 代码:

<form id="form" action="home.php" method="post"> 
    <select>
        <option value="TheJSGeneratedValue"></option>
        <option value="TheJSGeneratedValue"></option>
        <option value="TheJSGeneratedValue"></option>
        <option value="TheJSGeneratedValue"></option>
    </select>
</form>

我的问题是，为了让这些值出现在下拉菜单上，我必须在标签内编写如下内容:

<option value="TheJSGeneratedValue">TheJSGeneratedValue</option>

有什么办法可以在 JavaScript 上做到这一点吗？我接受 jQuery 答案，但我希望有一个 JavaScript 答案，我猜这与 thirdElementOp1.valueInside = "Value" 或类似的东西有关...

Answer 1

显示文本与值是分开的。您可以使用 .innerHTML 属性设置显示文本。

thirdElementOp1.value = "--IDEAS--";
thirdElementOp1.innerHTML = "--IDEAS--";

.value 属性是选择特定选项时选择将具有的编程值，或者是提交表单且该选项被选中时将向服务器发送的值。 .value 与显示值是分开的 - 尽管您可以通过简单地将两个属性设置为相同的值来使它们相同。

<小时/>

仅供引用，如果您仅使用值数组并从该数组构建选项对象，您的代码可能会更紧凑。这避免了大量复制代码，而且多了很多 DRY :

var form = document.getElementById("form");
var select = document.createElement("select"), option;
var items = ["--IDEAS--", "Random", "--FUN--", "Reflective"];
for (var i = 0; i < items.length; i++) {
    option = document.createElement("option");
    option.value = option.innerHTML = items[i];
    select.appendChild(option);
}
form.appendChild(select);