本文将介绍如何通过JavaScript编程方式来设置HTML表单中的选择框（Select）元素的值。选择框是一种常见的表单元素，它允许用户从预定义的选项列表中选择一个或多个选项。
获取选择框元素
要设置选择框的值，首先需要获取该选择框的DOM元素。可以使用document.getElementById()或document.querySelector()等方法获取选择框元素。例如，下面的代码演示了如何获取ID为“mySelect”的选择框元素：
var selectElement = document.getElementById("mySelect");设置选择框的值
一旦获取了选择框的DOM元素，就可以使用value属性设置其值。例如，下面的代码演示了如何将选择框的值设置为“option2”：
selectElement.value = "option2";
如果选择框允许选择多个选项，则可以使用数组来设置其值。例如，下面的代码演示了如何将选择框的值设置为“option1”和“option3”：
selectElement.value = ["option1", "option3"];
动态添加选项
除了设置选择框的值，还可以使用JavaScript动态添加选项。可以使用document.createElement()方法创建新的选项元素，并使用appendChild()方法将其添加到选择框中。例如，下面的代码演示了如何在ID为“mySelect”的选择框中添加一个名为“option4”的选项：
var optionElement = document.createElement("option");
optionElement.value = "option4";
optionElement.innerHTML = "Option 4";
selectElement.appendChild(optionElement);示例代码
以下是一个完整的示例代码，演示了如何使用JavaScript设置选择框的值并动态添加选项：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------- ------ ------------- ------- ------ -------- -------------- --------- ---------------------- ---------- --------- ---------------------- ---------- --------- ---------------------- ---------- ---------- -------- ------------------------------ -------------- -------- ------------------------- --------------- --------- ---------- ---------------- - ------ ------------- - ------------------------------------ ---------------------- - ---------- --- ---------- ----------- - ------ ------------- - ------------------------------------ ------ ------------- - --------------------------------- ---------------------- - ---------- -------------------------- - ------- --- -------------------------------------------- --- ---------- ------- -------
结论
通过本文，我们学习了如何以编程方式使用JavaScript设置选择框元素的值，并动态添加选项。这些技术对于构建交互式、动态的Web应用程序非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8674
