HTML 使用 JavaScript 数组填充下拉选择框

在本文中，我们将介绍如何使用 JavaScript 数组来填充 HTML 的下拉选择框（drop down select box）。

阅读更多：HTML 教程

什么是下拉选择框

下拉选择框是 HTML 表单元素中常见的一种类型，它允许用户从多个选项中选择一个值。通过使用 JavaScript 数组，我们可以动态地为下拉选择框提供选项，使其更加灵活和个性化。

创建下拉选择框

首先，我们需要在 HTML 文档中创建一个下拉选择框元素。下面是一个简单的例子：

<select id="mySelect"></select>

我们为下拉选择框元素添加了一个唯一的 id 属性，以便在 JavaScript 中引用它。

使用 JavaScript 数组填充下拉选择框

接下来，我们将使用 JavaScript 数组来动态地填充下拉选择框。

首先，我们需要创建一个 JavaScript 数组，其中包含我们想要填充下拉选择框的选项。以下是一个示例数组：

var fruits = ["苹果", "香蕉", "橙子", "草莓"];

现在，我们可以通过获取下拉选择框元素的引用，并使用 JavaScript 的循环结构将选项添加到下拉选择框中。下面是一个使用 for 循环的示例：

var selectBox = document.getElementById("mySelect");

for (var i = 0; i < fruits.length; i++) {
  var option = document.createElement("option");
  option.text = fruits[i];
  option.value = fruits[i];
  selectBox.appendChild(option);
}

在上面的代码中，我们使用了 document.createElement 方法创建了一个新的选项元素，并设置了其文本和值属性。然后，我们使用 appendChild 方法将该选项添加到下拉选择框中。

动态更新下拉选择框选项

使用 JavaScript 数组填充下拉选择框后，我们还可以动态地更新选项。例如，如果我们添加新的水果到数组中，我们可以使用以下代码将新的选项添加到下拉选择框中：

fruits.push("葡萄");

var option = document.createElement("option");
option.text = "葡萄";
option.value = "葡萄";
selectBox.appendChild(option);

当我们将新的选项添加到数组后，通过使用上述代码，新的选项将被添加到下拉选择框中。

完整示例

下面是一个完整的示例，演示了如何使用 JavaScript 数组来填充下拉选择框：

<!DOCTYPE html>
<html>
<head>
  <title>下拉选择框示例</title>
</head>
<body>
  <select id="mySelect"></select>

  <script>
    var fruits = ["苹果", "香蕉", "橙子", "草莓"];

    var selectBox = document.getElementById("mySelect");

    for (var i = 0; i < fruits.length; i++) {
      var option = document.createElement("option");
      option.text = fruits[i];
      option.value = fruits[i];
      selectBox.appendChild(option);
    }
  </script>
</body>
</html>