如何依赖两个字段来创建下拉依赖列表django ajax

from django.db import models

class Country(models.Model):
    name = models.CharField(max_length=100)

class City(models.Model):
    name = models.CharField(max_length=100)
    country = models.ForeignKey(Country, on_delete=models.CASCADE)

from django.http import JsonResponse

def get_cities(request):
    country_id = request.GET.get('country_id')
    cities = City.objects.filter(country_id=country_id).values('id', 'name')
    return JsonResponse({'cities': list(cities)})

<form>
    <select id="country" name="country">
        <option value="">请选择国家</option>
        <!-- 这里可以通过其他方式动态生成选项 -->
    </select>
    <select id="city" name="city">
        <option value="">请选择城市</option>
    </select>
</form>

<script>
    document.getElementById('country').addEventListener('change', function() {
        var countryId = this.value;
        var citySelect = document.getElementById('city');
        
        // 清空之前的选项
        while (citySelect.options.length > 1) {
            citySelect.remove(citySelect.options.length - 1);
        }
        
        // 发送Ajax请求获取城市列表
        if (countryId) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/get_cities/?country_id=' + countryId, true);
            xhr.onload = function() {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    response.cities.forEach(function(city) {
                        var option = document.createElement('option');
                        option.value = city.id;
                        option.textContent = city.name;
                        citySelect.appendChild(option);
                    });
                }
            };
            xhr.send();
        }
    });
</script>