Вот один, который я сделал для автомобилей. Вы можете адаптировать его, заменив марку автомобиля на страну и модель автомобиля на город
В форме __init__
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['car_make'].empty_label = 'Make'
self.fields['car_model'].empty_label = 'Model'
initial = kwargs.get('initial', None)
try: self.fields['car_model'].queryset = CarModel.objects.filter(car_make=initial['car_make'])
except: self.fields['car_model'].queryset = CarModel.objects.none()
Ajax view
def load_models(request):
car_make_id = request.GET.get('car_make')
car_models = CarModel.objects.filter(car_make_id=car_make_id).order_by('name')
return render(request, 'leases/partials/car_model_dropdown_list_options.html', {'car_models': car_models})
URL Ajax
path('ajax/load-models/', views.load_models, name="ajax_load_models"),
Javascript (с использованием JQuery) в шаблоне
$("#id_car_make").change(function () {
var url = $("#searchForm").attr("data-models-url"); // get the url of the `load_cities` view
var carMakeId = $(this).val(); // get the selected country ID from the HTML input
$.ajax({ // initialize an AJAX request
url: url, // set the url of the request (= localhost:8000/hr/ajax/load-cities/)
data: {
'car_make': carMakeId // add the country id to the GET parameters
},
success: function (data) { // `data` is the return of the `load_cities` view function
$("#id_car_model").html(data); // replace the contents of the city input with the data that came from the server
}
});
});