为从属下拉列表填充标签时出现问题

<select id="main-dropdown">
  <option value="">请选择</option>
  <option value="country1">国家1</option>
  <option value="country2">国家2</option>
</select>

<select id="sub-dropdown">
  <option value="">请选择城市</option>
</select>

document.getElementById('main-dropdown').addEventListener('change', function() {
  const selectedCountry = this.value;
  const subDropdown = document.getElementById('sub-dropdown');
  
  // 清空从属下拉列表
  subDropdown.innerHTML = '<option value="">请选择城市</option>';
  
  if (selectedCountry) {
    // 模拟异步请求
    fetch(`/api/cities?country=${selectedCountry}`)
      .then(response => response.json())
      .then(data => {
        data.forEach(city => {
          const option = document.createElement('option');
          option.value = city.id;
          option.textContent = city.name;
          subDropdown.appendChild(option);
        });
      })
      .catch(error => {
        console.error('Error fetching cities:', error);
      });
  }
});

const express = require('express');
const app = express();

const citiesData = {
  country1: [{ id: 'city1', name: '城市1' }, { id: 'city2', name: '城市2' }],
  country2: [{ id: 'city3', name: '城市3' }, { id: 'city4', name: '城市4' }]
};

app.get('/api/cities', (req, res) => {
  const country = req.query.country;
  const cities = citiesData[country] || [];
  res.json(cities);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});