使用 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);