如何使用 JavaScript 创建带有数组值的下拉列表？

下拉列表是 web 表单中常用的元素之一，它可以让用户从预定义选项中选择一项或多项。

在 JavaScript 中，我们可以使用数组来定义下拉列表的选项，并使用 DOM API 创建下拉列表元素和选项。本文将介绍如何使用 JavaScript 创建带有数组值的下拉列表。

创建基本的下拉列表

首先，我们需要使用 JavaScript 创建一个 select 元素作为下拉列表的容器，并添加一些 option 元素作为选项。可以使用以下代码：

let select = document.createElement('select');
let options = ['Apple', 'Banana', 'Cherry', 'Date'];

for (let i = 0; i < options.length; i++) {
  let option = document.createElement('option');
  option.text = options[i];
  select.add(option);
}

该代码首先使用 document.createElement() 创建一个名为 select 的下拉列表元素，并使用数组 options 定义四个选项。然后，使用 for 循环遍历 options 数组，为每个选项创建 option 元素并将其添加到 select 元素中。每个 option 元素的文本内容设置为数组元素的值（即果实名称）。

现在，我们可以将 select 元素添加到 DOM 中，并预览结果：

document.body.appendChild(select);

执行上述代码后，应该会在页面上看到一个新的下拉列表，其中包含四个包含水果名称的选项。

添加值到选项

除了显示文本之外，我们还可以为每个选项添加值。这很有用，因为在提交表单时，它允许我们将选项的值一起发送给服务器。

要添加值到选项元素，我们可以像这样做：

let options = [
  { name: 'Apple', value: '1' },
  { name: 'Banana', value: '2' },
  { name: 'Cherry', value: '3' },
  { name: 'Date', value: '4' }
];

for (let i = 0; i < options.length; i++) {
  let option = document.createElement('option');
  option.text = options[i].name;
  option.value = options[i].value;
  select.add(option);
}

这里，我们使用一个包含每个选项名称和值的对象数组来定义选项。然后，我们使用 for 循环遍历该数组，并为每个选项创建一个 option 元素，并通过添加 value 属性为其指定值。

获取选定的选项

在实际应用中，您通常需要获取用户选择的选项的值。为了做到这一点，我们可以添加一个事件监听器来监听 select 元素的 change 事件，并在选项更改时获取选定的选项的值。

select.addEventListener('change', function() {
  let selectedValue = this.value;
  console.log('Selected value:', selectedValue);
});

这里，我们使用 addEventListener() 方法向 select 元素添加一个 change 事件监听器，并在用户更改选项时调用一个回调函数。此回调函数获取选定选项的值并将其打印到控制台。

总结

在本文中，我们介绍了如何使用 JavaScript 创建带有数组值的下拉列表。我们首先创建了一个基本的下拉列表，并介绍了如何添加值到选项和获取选定选项的值。如果您遇到下拉列表的编程任务，请按照本文的指导使用 JavaScript 来生成您需要的下拉列表。