使用变量填充下拉列表 - JavaScript

在 JavaScript 中，我们可以使用变量来动态填充下拉列表。这在前端开发中非常常见，通常是通过 Ajax 请求获取数据，并将其填充到下拉列表中。

下面是一些示例代码，演示如何使用变量来填充下拉列表：

// 获取下拉列表元素
const selectElement = document.querySelector('#my-select');

// 填充选项
const options = [
  { value: 'option-1', label: '选项 1' },
  { value: 'option-2', label: '选项 2' },
  { value: 'option-3', label: '选项 3' },
];

// 创建选项元素并添加到下拉列表
for (let i = 0; i < options.length; i++) {
  const option = options[i];
  const optionElement = document.createElement('option');
  optionElement.value = option.value;
  optionElement.textContent = option.label;
  selectElement.appendChild(optionElement);
}

在上面的示例中，我们首先获取了需要填充数据的下拉列表元素。然后，我们定义了选项的数组，并在循环中创建了选项元素，并将其添加到下拉列表中。

如果我们需要通过 Ajax 请求动态获取选项，可以使用类似于下面这样的代码：

// 获取下拉列表元素
const selectElement = document.querySelector('#my-select');

// 发送 Ajax 请求并获取数据
fetch('/api/options')
  .then(response => response.json())
  .then(options => {
    // 创建选项元素并添加到下拉列表
    for (let i = 0; i < options.length; i++) {
      const option = options[i];
      const optionElement = document.createElement('option');
      optionElement.value = option.value;
      optionElement.textContent = option.label;
      selectElement.appendChild(optionElement);
    }
  });

在上面的示例中，我们先发起了一个 Ajax 请求，获取选项数据。然后，在返回数据后，我们通过循环创建了选项元素，并将其添加到下拉列表中。

总结：

通过使用变量，我们可以动态地填充下拉列表。无论是通过硬编码数据，还是通过 Ajax 请求，我们都可以使用类似的方法来实现这一功能。