在选择元素和加载数据中设置默认选项

<select>
  <option value="USA" selected>United States</option>
  <option value="Canada">Canada</option>
  <option value="Mexico">Mexico</option>
</select>

<select id="countrySelect"></select>

<script>
  const countries = [
    { value: 'USA', name: 'United States' },
    { value: 'Canada', name: 'Canada' },
    { value: 'Mexico', name: 'Mexico' }
  ];

  const defaultCountry = 'USA';

  function loadCountries() {
    const select = document.getElementById('countrySelect');
    countries.forEach(country => {
      const option = document.createElement('option');
      option.value = country.value;
      option.textContent = country.name;
      if (country.value === defaultCountry) {
        option.selected = true;
      }
      select.appendChild(option);
    });
  }

  loadCountries();
</script>

document.addEventListener('DOMContentLoaded', () => {
  // 确保在 DOM 加载完成后再执行设置默认选项的代码
  loadCountries();
});

function loadCountries(callback) {
  fetch('/api/countries')
    .then(response => response.json())
    .then(data => {
      const select = document.getElementById('countrySelect');
      data.forEach(country => {
        const option = document.createElement('option');
        option.value = country.value;
        option.textContent = country.name;
        select.appendChild(option);
      });
      if (callback) callback();
    });
}

loadCountries(() => {
  const defaultCountry = 'USA';
  const select = document.getElementById('countrySelect');
  const defaultOption = select.querySelector(`[value="${defaultCountry}"]`);
  if (defaultOption) {
    defaultOption.selected = true;
  }
});