如何将国家和州从Python中的JSON转换为HTML中的下拉列表？

{
  "countries": [
    {
      "name": "Country 1",
      "states": [
        "State 1",
        "State 2",
        "State 3"
      ]
    },
    {
      "name": "Country 2",
      "states": [
        "State 4",
        "State 5",
        "State 6"
      ]
    },
    ...
  ]
}

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

fetch('path/to/json/data.json')
  .then(response => response.json())
  .then(data => {
    const countrySelect = document.getElementById('countrySelect');
    const stateSelect = document.getElementById('stateSelect');

    // 生成国家下拉列表选项
    data.countries.forEach(country => {
      const option = document.createElement('option');
      option.value = country.name;
      option.text = country.name;
      countrySelect.appendChild(option);
    });

    // 根据选择的国家生成州下拉列表选项
    countrySelect.addEventListener('change', () => {
      const selectedCountry = countrySelect.value;
      const selectedCountryData = data.countries.find(country => country.name === selectedCountry);

      // 清空州下拉列表
      stateSelect.innerHTML = '';

      // 生成州下拉列表选项
      selectedCountryData.states.forEach(state => {
        const option = document.createElement('option');
        option.value = state;
        option.text = state;
        stateSelect.appendChild(option);
      });
    });
  });